Question

我已经使用了这个脚本很长一段时间了，我对jQuery几乎不擅长，所以当我看到这个从j.1的v.1.9x中删除时，我找不到一个对jQuery有意义的修复我（除了添加migrate插件修复它但添加了很多脚本）。任何帮助将不胜感激，所以我可以学习如何复制这种行为。谢谢！

$(document).ready(function () {
$("#switcher-wrapper .toggle").toggle(function () {
    $("#switcher-wrapper").animate({
        left: "-1px"
    });
    $(this).addClass("selected");
    return false;
}, function () {
    $("#switcher-wrapper").animate({
        left: "-242px"
    });
    $(this).removeClass("selected");
    return false;
});

}）;

这适用于1.8.3但在1.9 jQuery中做的很奇怪。

Answer 1

切换已从1.9（see here）

中删除

请改为：

$("body").on('click', '#switcher-wrapper .toggle' function () {

    if($(this).hasClass('selected')) {

        $("#switcher-wrapper").animate({
            left: "-242px"
        });
        $(this).removeClass("selected");

    } else {

       $("#switcher-wrapper").animate({
            left: "-1px"
        });
        $(this).addClass("selected");

    }
    return false;

});

Answer 2

这是一个很好的例子，说明为什么不需要基于事件的.toggle()，实际上会导致重复的代码，因为两个切换的函数是分开的。

元素上已经有“selected”属性，因此不需要基于事件的.toggle()方法的内部状态管理。旧代码存在两种状态指示不同步的风险，这是很常见的事情。
事件位于包装器下面的.toggle元素上，因此在包装器上安装委托事件是有意义的（除非您删除包装器并在某些时候重写它）。
使用e.delegateTarget代替重新指定包装元素可能会使代码更具可重用性。委托目标是当前处理委派的单击事件的元素，而不是单击的最内层目标。
快速踩到.toggle元素可能会导致它来回反弹一段时间。 .stop()有助于防止这种情况发生。

```

$("#switcher-wrapper").on("click", ".toggle", function (e) {
   var selected = $(this).hasClass("selected");
   $(e.delegateTarget).stop().animate({
      left: selected? "-242px" : "-1px"
   });
   $(this).toggleClass("selected", !selected);
});

```

http://jsfiddle.net/KmYES/

用于动画脚本的jQuery 1.9切换功能

2 个答案: