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

Question

我在SO上看过几篇帖子,但它们在功能和结构方面都太具体了,而我正在寻找的东西是我或任何人都可以在任何地方使用的更普遍的东西.

我只需要一个按钮,点击它可以在3个类之间循环.但是如果出现需要循环浏览4,5个或更多类的情况,则可以轻松地缩放脚本.

到目前为止,我能够在两个班级之间"循环",这基本上比骑车更"切换",所以我有:

HTML:

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

jQuery的:

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

这是一个简单的小提琴.

现在,你会(我,我)认为在该方法中添加第三个类可以工作,但它不会:

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

发生的事情是,切换开始发生在class1和之间class3.

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

然后:如果有人需要循环到4个,5个或更多课程怎么办？

Answer 1

你可以这样做 :

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

示范

Answer 2

这是另一种方法:

if ($(this).hasClass('one')) {
    $(this).removeClass('one').addClass('two');
} else if ($(this).hasClass('two')) {
    $(this).removeClass('two').addClass('three');
} else if ($(this).hasClass('three')) {
    $(this).removeClass('three').addClass('one');
}