javascript - jQuery:在 3 个类之间切换(最初)

Question

我在这里看到了几篇关于 SO 的帖子，但它们在功能和结构上过于具体，而我正在寻找的是我或任何人都可以在任何地方使用的更通用的东西。

我只需要有一个按钮，单击该按钮可以在 3 类之间循环。但如果出现必须循环 4、5 或更多类的情况，则可以轻松扩展脚本。

截至目前，我能够在两个类(class)之间“循环”，这基本上比骑自行车更“切换”，因此我有:

HTML:

<a href="#" class="toggle">Toggle classes</a>
<div class="class1">...</div>

jQuery:

$('.toggle').click(function () {
  $('div').toggleClass('class1 class2');
});

这是一个简单的 fiddle

现在，您会(好吧，我)认为向该方法添加第三个类会起作用，但事实并非如此:

$('div').toggleClass('class1 class2 class3');

发生的情况是切换开始发生在 class1 和 class3 之间。

这就是我最初遇到的问题:如何让 Toggle 按钮按顺序循环通过 3 类？

然后:如果有人需要骑自行车去 4、5 或更多类(class)怎么办？

Answer 1

你可以这样做:

$('.toggle').click(function () {
  var classes = ['class1','class2','class3'];
  $('div').each(function(){
    this.className = classes[($.inArray(this.className, classes)+1)%classes.length];
  });
});

Demonstration