将jQuery转换为无冲突模式

时间:2013-09-08 08:37:35

标签: javascript jquery

这是我正在使用的脚本。

$(window).load(function() {
$('#edifici, #artistici, #industriale, #fotovoltaico, #veterinaria, #architettonici').hide();

if (!!window.location.hash) {
    var hash = window.location.hash;
    var $content = $(hash);
    showContent($content)
}

$('.home').click(function () {
    var id = this.id.replace('mostra_', '');
    var $content = $('#' + id + ':not(:visible)');
    if ($('.current').length === 0) {
        showContent($content)
    } else {
        $('.current').fadeOut(600, function () {
            showContent($content)
        });
    }
});

function showContent(content) {
    content.fadeIn(600);
    $('.current').removeClass('current');
    content.addClass('current');
}
});

根据this guide,要在WordPress(在无冲突模式下使用jQuery)中使用它,我将脚本修改为

jQuery.noConflict();

jQuery(window).load(function($) {
$('#edifici, #artistici, #industriale, #fotovoltaico, #veterinaria, #architettonici').hide();

if (!!window.location.hash) {
    var hash = window.location.hash;
    var $content = $(hash);
    showContent($content)
}

$('.home').click(function () {
    var id = this.id.replace('mostra_', '');
    var $content = $('#' + id + ':not(:visible)');
    if ($('.current').length === 0) {
        showContent($content)
    } else {
        $('.current').fadeOut(600, function () {
            showContent($content)
        });
    }
});

function showContent(content) {
    content.fadeIn(600);
    $('.current').removeClass('current');
    content.addClass('current');
}
});

不幸的是它似乎没有正常工作......我做错了什么?

1 个答案:

答案 0 :(得分:6)

jQuery.noConflict();
  

描述:放弃jQuery对$ variable 的控制。

这意味着jQuery将不再使用$,因此它将清除与其他库的所有冲突。

要在内部使用$,您可以执行以下操作:

您可以将现有代码包装到匿名函数中并将jQuery作为参数传递,例如:

(function ($) {

    // use $ here
    $('#hello').html('world');

})(jQuery);

或使用jQuery提供的快捷方式:

jQuery(function($) {

    // use $
    $('#hello').html('world');

});

ready方法也传递了jQuery对象:

jQuery(document).ready(function ($) {
    // ...
});