Jquery 切换三种状态并带有初始状态。

Question

Jquery 切换三种状态并带有初始状态。

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
});

我的问题是关于初始页面加载时，后端正在设置#标签上的类，但是点击标签toggle()会从第一个toggle状态“on”开始循环，而不考虑初始状态。

我想要的是一种智能toggle，它根据传递给当前状态的选项进入下一个状态。

我可能会添加四个状态，所以我不想要复杂的if else语句。

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

- lukemh

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Yousef Salimpour · Answer 1

看起来你需要对jQuery进行一些黑客攻击，这肯定不礼貌，但是可以解决问题。

我查看了jQuery源代码，基本上它所做的就是：

生成一个新的唯一ID，并将其存储为名为guid的属性在你的第一个函数中
在jQuery._data(element, 'lastToggle'+guid, index)中存储最后调用的函数的索引
使用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);

通过点击按钮，您可以看到它将调用第三个函数等等。您需要至少在变量中定义第一个函数以便稍后访问其属性。

请记住，这只是一种技巧，有一天可能会因为升级jQuery而失效。