0

我已经使用这个脚本很长时间了，而且我几乎不擅长 jQuery，所以当我看到它从 jQuery 的 v.1.9x 中删除时，我找不到对我有意义的修复（除了添加 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 中却很奇怪。

4

2 回答 2

4

Toggle 已从 1.9 中删除（请参见此处）

改为这样做：

$("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;

});
于 2013-02-18T21:32:50.380 回答
1

这是为什么.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/

于 2013-02-20T20:14:47.620 回答