Question

我正在使用wordpress模板。在xhtml文件上我对jquery没有任何问题，但现在在wordpress no-conflict模式下，我的代码会出错。

如何将其重写为无冲突？

//Fade in and out animation on hove buttons - meteo, and slide pagination balls
$(window).load(function() {
    $("ul.slidebtns li a").hover(function() {
        divW = ($(this).next("div").width() / 2) - ($(this).outerWidth() / 2);
        $(this).next("div").css({marginLeft: -divW }).animate({ opacity: "show" }, "fast");
    }, function() {
        $(this).next("div").animate({opacity: "hide"}, "fast");
    });

    $("#tempicon img").hover(function() {
            var $img = $(this);
            var $labelDiv = $img.next("div");

            var halfOfLabelDivsWidth = $labelDiv.width() / 2;
            var imgMiddle = $img.position().left + ($img.width() / 2);

            $labelDiv
                .css({
                    left: imgMiddle - halfOfLabelDivsWidth
                })
                .animate({ opacity: "show" }, "fast");
        }, function() {
            $(this).next("div").animate({opacity: "hide"}, "fast");
    });
});

我是否要将所有$符号更改为jQuery？我试图只重写像：

这样的部分

$(window).load(function() {
jQuery(window).load(function() {

和

$("ul.slidebtns li a").hover(function() {
jQuery("ul.slidebtns li a").hover(function() {

但它仍然在$（this）上出错，例如......

Answer 1

将代码包装在别名闭包中：

(function ($) {
    ...all your code here...
}(jQuery));

这将允许您在闭包中使用$作为jQuery工厂函数的参考。

如果您不愿意将所有内容都包含在一个闭包中（例如，您必须注意var语句，因为它们可能需要属于不同的上下文），您需要将$的所有使用情况更改为jQuery。

此外，您正在使用$(window).load，这通常是不必要的（除非您实际上需要加载图像）。相反，你应该听document.ready事件。长形式是：

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

但它通常用于以下的别名速记形式：

jQuery(function ($) {
   ...code...
});

如何将jquery重写为无冲突模式？

1 个答案: