jquery切换3状态与初始状态

Question

jQuery的toggle()支持多种状态，并且它会循环你给它的多个状态

来自documentation :

If more than two handlers are provided, .toggle() will cycle among all of them. For example, if there are three handlers, then the first handler will be called on the first click, the fourth click, the seventh click, and so on.

以下代码效果很好，循环遍历所有三种状态。

$('#tag').toggle(function() {
  //set cssClass to 'on'
  //remove all other classes
}, function() {
  //set cssClass to 'off'
  //remove all other classes
}, function() {
  //set cssClass to 'none'
  //remove all other classes
});

我的问题是，在初始页面加载时，该类由后端设置在 #tag 上，但是当单击标签时，toggle() 会从第一个切换状态“on”开始循环，无论初始状态如何状态。

我想我正在寻找的是一个智能切换，它根据传入的当前状态的选项进入下一个状态。

我可能会添加四个状态，因此我不需要复杂的 if else 语句。

n.b 类的设置和删除只是一个示例。我正在做其他事情。请不要给出添加和删除类的示例 - 尽管您可以检查类以查找初始状态。

Answer 1

在我看来，您需要对 jQuery 进行修改，这确实不礼貌，但确实有效。

我查看了 jQuery 源代码，这就是它的基本作用:

1. 生成一个新的唯一 ID 并将其存储为第一个函数中名为 guid 的属性
2. 存储 jQuery._data(element, 'lastToggle'+guid, index) 中调用的最后一个函数的索引
3. 使用 lastToggle 值和函数数组切换函数

因此，为了更改切换索引，您所需要做的就是从第一个函数中读取 guid 并使用元素上的 jQuery._data 设置所需的值。

我在这里给你举了一个简单的例子: http://jsfiddle.net/2gJdG/

要点如下:

var fn1 = function (){
    console.log(1);        
};

$('button').toggle(fn1, function (){
    console.log(2);
}, function(){
    console.log(3);
}, function(){
    console.log(4);
});

jQuery._data($('button').get(0), 'lastToggle' + fn1.guid, 2);

正如您所见，单击按钮它将调用第三个函数，依此类推。您需要在变量中至少定义第一个函数，以便稍后访问它的属性。

记住，这只是一个 hack，有一天可能会因为升级你的 jQuery 而被破坏。