jQuery 1.9移除toggle(handler)后的替代方案及废弃原因咨询

嘿，你现在用计数器实现点击切换确实有点麻烦，我给你分享几个更简洁的替代方案，同时也聊聊为什么这个方法会被移除～

一、更简便的替代方案 #

1. 用data()存储切换状态 #

这种方式不用全局变量，直接把状态绑定在元素上，代码更干净：

$('ele').click(function() {
  const $this = $(this);
  // 切换状态，初始默认是false
  const isToggled = !$this.data('toggled');
  $this.data('toggled', isToggled);

  isToggled ? alert("count is 0") : alert("count is NOT 0");
});

2. 结合CSS类切换（适合和样式联动的场景） #

如果你的切换操作还需要同步改变元素样式，这种方式能一举两得：

$('ele').click(function() {
  const $this = $(this);
  $this.toggleClass('is-toggled');

  if ($this.hasClass('is-toggled')) {
    alert("count is 0");
  } else {
    alert("count is NOT 0");
  }
});

你还可以给.is-toggled类编写对应的CSS样式，同步实现视觉上的切换效果。

3. 封装自己的toggleHandler函数（适合复用场景） #

如果需要在多个元素上使用这种切换逻辑，可以封装成一个自定义jQuery方法，用法和原来的toggle(handler)几乎一致：

$.fn.toggleHandler = function(handler1, handler2) {
  let toggleFlag = false;
  return this.click(function() {
    toggleFlag = !toggleFlag;
    // 确保this指向当前元素，参数也能正常传递
    return toggleFlag ? handler1.apply(this, arguments) : handler2.apply(this, arguments);
  });
};

// 使用示例
$('ele').toggleHandler(
  () => alert("count is 0"),
  () => alert("count is NOT 0")
);

二、toggle(handler)被废弃的原因 #

这个方法被移除主要有几个核心原因：

• API歧义严重：jQuery里的toggle()本来就有两个完全不同的功能：无参数时是切换元素的显示/隐藏，传处理函数时是切换点击逻辑。这导致很多开发者（尤其是新手）经常混淆这两个用法，引发不必要的bug。
• 维护成本过高：维护两个逻辑完全不同但同名的方法，会增加jQuery源码的复杂度，团队需要投入额外精力去保证两个功能互不干扰。
• 功能可替代：切换点击逻辑的需求，用基础的data()、addClass()或者原生JS就能轻松实现，没必要保留一个专门的API来增加冗余。

内容的提问来源于stack exchange，提问作者X-sky