jQuery点击切换多函数：替代已移除toggle方法的最优方案探讨

针对你提出的「jQuery最新版本移除toggle方法后，如何更优地在点击事件中切换不同函数」的问题，这里整理几种实用方案，包括你提到的on/off思路的延伸：

一、用on/off手动切换（适合两状态场景） #

你给出的这个方案非常直接，完全利用jQuery的事件绑定/解绑API实现两状态切换，逻辑清晰易懂：

$("#b4").on('click', firstClick)

function firstClick() { 
  alert("First Clicked"); 
  $("#b4").off('click').on('click', secondClick) 
}

function secondClick() { 
  alert("Second Clicked"); 
  $("#b4").off('click').on('click', firstClick) 
}

这种方式的优点是不需要额外维护状态变量，但如果是三个及以上的切换状态，代码会变得冗余，需要不断重复绑定/解绑操作。

二、自定义clickToggle插件（支持多函数循环） #

如果需要支持3个甚至更多函数的循环触发，自定义插件是更优雅的选择，通过元素的data属性维护当前触发的函数索引：

(function($) { 
  $.fn.clickToggle = function(...funcs) { 
    // 过滤掉无效的函数参数，支持任意数量的有效函数
    funcs = funcs.filter(fn => typeof fn === 'function');
    if (!funcs.length) return this;
    
    this.data('toggleIndex', 0); 
    this.click(function() { 
      const $this = $(this);
      const currentIndex = $this.data('toggleIndex');
      // 确保函数的this指向当前元素
      funcs[currentIndex].call(this);
      // 更新索引，循环切换
      $this.data('toggleIndex', (currentIndex + 1) % funcs.length);
    }); 
    return this; 
  }; 
}(jQuery));

// 使用示例：支持2个或多个函数
$('#b1').clickToggle( 
  function() {alert('First handler');}, 
  function() {alert('Second handler');}, 
  function() {alert('Third handler');} 
);

我优化了原插件的代码，改用剩余参数...funcs来支持任意数量的函数参数，同时过滤无效参数，让插件更健壮。

三、闭包维护状态（轻量无插件方案） #

如果不想引入插件，也可以用闭包封装状态，避免全局变量或操作data属性，适合单个元素的场景：

$('#b2').on('click', (function() {
  let toggleCount = 0;
  const handlerList = [
    function() { alert('First click'); },
    function() { alert('Second click'); },
    function() { alert('Third click'); }
  ];
  
  return function() {
    // 确保this指向触发点击的元素
    handlerList[toggleCount].call(this);
    toggleCount = (toggleCount + 1) % handlerList.length;
  };
})());

这种方式把状态变量toggleCount封装在闭包里，不会污染全局环境，代码也比较简洁。

内容的提问来源于stack exchange，提问作者skyisfalling