用于动画脚本的jQuery 1.9切换函数

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

$(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中做了一些奇怪的事情。

切换已从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;

});

---

切换已从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;

});

---

这是一个很好的例子，说明了为什么不需要基于事件的

.toggle（）

，实际上会导致代码重复，因为两个切换函数是分开的

• 元素上已经有一个“selected”属性，因此不需要基于事件的

  .toggle（）

  方法的内部状态管理。旧代码存在两个状态指示不同步的风险，这是一个常见的问题
• 事件位于包装器下面的.toggle元素上，因此在包装器上安装委派事件是有意义的（除非您要删除包装器并在某个时候重写它）
• 使用

  e.delegateTarget

  而不是重新指定包装器元素可能会使代码更易于重用。委托目标是当前处理委托单击事件的元素，而不是被单击的最内部目标
• 快速点击.toggle元素可能会导致它来回反弹一段时间。

  .stop（）

  可以帮助防止这种情况

```

```

---

这是一个很好的例子，说明了为什么不需要基于事件的

.toggle（）

，实际上会导致重复的代码，因为两个切换函数是分开的

• 元素上已经有一个“selected”属性，因此不需要基于事件的

  .toggle（）

  方法的内部状态管理。旧代码存在两个状态指示不同步的风险，这是一个常见的问题
• 事件位于包装器下面的.toggle元素上，因此在包装器上安装委派事件是有意义的（除非您要删除包装器并在某个时候重写它）
• 使用

  e.delegateTarget

  而不是重新指定包装器元素可能会使代码更易于重用。委托目标是当前处理委托单击事件的元素，而不是被单击的最内部目标
• 快速点击.toggle元素可能会导致它来回反弹一段时间。

  .stop（）

  可以帮助防止这种情况

```

```

---

你太棒了！非常感谢你！你太棒了！非常感谢你！