3

jQuery toggle() 支持多种状态，它可以循环通过尽可能多的状态

从文档中：

如果提供了两个以上的处理程序， .toggle() 将在所有处理程序之间循环。例如，如果有三个处理程序，那么第一个处理程序将在第一次单击、第四次单击、第七次单击时调用，以此类推。

以下代码运行良好，循环通过所有三种状态。

$('#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 语句。

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

4

1 回答 1

0

在我看来，您需要对 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 而中断。

于 2012-11-14T10:26:44.147 回答