jQuery：在3个类之间切换（初始状态）

Question

我在 StackOverflow 上看到了几篇帖子，但它们的功能和结构太具体化了。我要找的是更普遍的东西，可以被我或任何人在任何地方使用。

我需要的只是一个按钮，在点击时可以在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之间切换。

所以这就是我的最初问题：如何让切换按钮按顺序循环遍历3个类？

然后：如果有人需要循环到4、5或更多个类，该怎么办？

- Ricardo Zea

Answer 1

你可以这样做：

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

演示

- Denys Séguret

---

这正是我想要实现的，而且扩展起来也非常容易。添加演示是一个巨大的加分项。非常感谢，dystroy。 - Ricardo Zea

绝对喜欢你的方式，更加简洁。 - Toddish

可以完美地与类一起使用！我有一个类似的情况，需要在数据属性值（data-align=left|center|right）之间切换。你有没有一个好的解决方案呢 ;)？ - Veiko Jääger

但是这个解决方案不会覆盖任何其他不应该被此逻辑接触的类吗？ - Chuck

@Chuck 你说得对，这不兼容在这些元素上使用其他类。现在，已经过去了4年以上并且有了新的工具，我会使用classList轻松添加和删除类。 - Denys Séguret

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

- jbramble76

---

虽然这种方法不如主要答案具有可扩展性，但对于刚接触jquery的人来说，我很欣赏它的简单易懂。 - brownmagik352

这个用 || 运算符会不会更优雅一些，或者不可能实现？ - Joshua Robison

Answer 3

var classes = ['class1', 'class2', 'class3'],
    currentClass = 0;

$('.toggle').click(function () {

    $('div').removeClass(classes[currentClass]);

    if (currentClass + 1 < classes.length)
    {
        currentClass += 1;
    }
    else
    {
        currentClass = 0;
    }

    $('div').addClass(classes[currentClass]);

});

类似这样的东西应该可以正常工作 :)

Tinker IO 链接 - https://tinker.io/1048b

- Toddish

---

Toddish，我尝试了你的代码，但它没有起作用。还是谢谢你的时间。 - Ricardo Zea

我认为错误在于将类设置为 currentClass 而不是 classes[currentClass]。 - wirey00

啊！太好了，它运行得很好。给你点赞，伙计，再次感谢。 - Ricardo Zea

Answer 4

这对我很有用，可以堆叠多个，然后轻松包裹。

switch($('div.sel_object table').attr('class'))
    {
    case "A":   $('div.sel_object table').toggleClass('A B'); break;
    case "B":   $('div.sel_object table').toggleClass('B C'); break;
    case "C":   $('div.sel_object table').toggleClass('C D'); break;
    case "D":   $('div.sel_object table').toggleClass('D A'); break;                
    }

- user3238363

---

轻松鼓励分享一个更多功能的函数，该函数具有未定义数量的项目和循环。 - Hugolpz

Answer 5

HTML：

<div id="example" class="red">color sample</div>

CSS：

.red {
  background-color: red;
}
.yellow {
  background-color: yellow;
}
.green {
  background-color: green;
}

JS：

$(document).ready(function() {
    var colors = ['red', 'yellow', 'green'];
    var tmp;
    setInterval(function(){
        tmp && $('#example').removeClass(tmp);
        tmp = colors.pop();
        $('#example').addClass(tmp);
        colors.unshift(tmp);
    }, 1000);
});

演示

- huan feng

Answer 6

循环遍历类的索引，从一个类切换到另一个类。

var classes = ['border-top','border-right','border-bottom','border-left'];
var border = 'border-top';
var index = 0;
var timer = setInterval( function() {
    var callback = function(response) {
        index = ( ++index == 4 ? 0 : index );
        $(element).html("text").toggleClass( border + " " + classes[index] );
        border = classes[index];
        };
    }, 1000 );

- user3238363

Answer 7

我将user3353523的答案转换成了一个jQuery插件。

(function() {
  $.fn.rotateClass = function(cls1, cls2, cls3) {
    if ($(this).hasClass(cls1)) {
      return $(this).removeClass(cls1).addClass(cls2);
    } else if ($(this).hasClass(cls2)) {
      return $(this).removeClass(cls2).addClass(cls3);
    } else if ($(this).hasClass(cls3)) {
      return $(this).removeClass(cls3).addClass(cls1);
    } else {
      return $(this).toggleClass(cls1); // Default case.
    }
  }
})(jQuery);

$('#click-me').on('click', function(e) {
  $(this).rotateClass('cls-1', 'cls-2', 'cls-3');
});

#click-me {
  width: 5em;
  height: 5em;
  line-height: 5em;
  text-align: center;
  border: thin solid #777;
  margin: calc(49vh - 2.4em) auto;
  cursor: pointer;
}

.unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
   -khtml-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.cls-1 { background: #FFAAAA; }
.cls-2 { background: #AAFFAA; }
.cls-3 { background: #AAAAFF; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="click-me" class="unselectable">Click Me!</div>

---

动态规划

(function() {
  $.fn.rotateClass = function() {
    let $this = this,
        clsList = arguments.length > 1 ? [].slice.call(arguments) : arguments[0];
    if (clsList.length === 0) {
      return $this;
    }
    if (typeof clsList === 'string') {
      clsList = clsList.indexOf(' ') > -1 ? clsList.split(/\s+/) : [ clsList ];
    }
    if (clsList.length > 1) {
      for (let idx = 0; idx < clsList.length; idx++) {
        if ($this.hasClass(clsList[idx])) {
          let nextIdx = (idx + 1) % clsList.length,
              nextCls = clsList.splice(nextIdx, 1);
          return $this.removeClass(clsList.join(' ')).addClass(nextCls[0]);
        }
      }
    }
    return $this.toggleClass(clsList[0]);
  }
})(jQuery);

$('#click-me').on('click', function(e) {
  $(this).rotateClass('cls-1', 'cls-2', 'cls-3');     // Parameters
  //$(this).rotateClass(['cls-1', 'cls-2', 'cls-3']); // Array
  //$(this).rotateClass('cls-1 cls-2 cls-3');         // String
});

#click-me {
  width: 5em;
  height: 5em;
  line-height: 5em;
  text-align: center;
  border: thin solid #777;
  margin: calc(49vh - 2.4em) auto;
  cursor: pointer;
}

.unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
   -khtml-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.cls-1 { background: #FFAAAA; }
.cls-2 { background: #AAFFAA; }
.cls-3 { background: #AAAAFF; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="click-me" class="unselectable">Click Me!</div>

- Mr. Polywhirl

---

感谢Polywhirl先生。如果您有超过3个类，该怎么办？所选答案在这方面非常可扩展。此外，例如单击div而不是链接会感觉奇怪:p。感谢插件。 - Ricardo Zea

@RicardoZea 好的，我只是将逻辑转换成了一个插件。我已经创建了一个动态插件。;) - Mr. Polywhirl

Answer 8

另一种使用 classList replace 的版本。目前并非所有浏览器都支持。

var classes = ["class1", "class2", "class3"];
var index = 0;
var classList = document.querySelector("div").classList;
const len = classes.length;

$('.toggle').click(function() {
  classList.replace(classes[index++ % len], classes[index % len]);
});

.class1 {
  background: yellow;
}

.class2 {
  background: orange;
}

.class3 {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#" class="toggle">Toggle classes</a>
<div class="class1">
  look at me!
</div>

- H77