toggleClass在三个不同的类之间[重复]

Question

这个问题在这里已有答案：

• jQuery: Toggling between 3 classes (initially) 8个答案

我试图每4秒在三个班级之间切换，但我无法弄清楚如何让第三个班级工作。这就是我到目前为止（有效）

$(document).ready(function() {
  setInterval(function(){
    $('.myClass.class1').toggleClass('class2')
  }, 4000);
});

Answer 1

如果你可以使用classList replace，以下方法可行。

var classes = ["class1", "class2", "class3"];
var index = 0;
var classList = document.querySelector(".myClass").classList;

setInterval(function() {
  classList.replace(classes[index++ % 3], classes[index % 3]);
}, 1000);

.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>
<div class="myClass class1">
  look at me!
</div>

如果您不能使用replace（并非所有浏览器都支持），您可以使用此jquery版本替换该行：

var classes = ["class1", "class2", "class3"];
var index = 0;

setInterval(function() {
  $(".myClass").removeClass(classes[index++ % 3]).addClass(classes[index % 3]);
}, 1000);

.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>
<div class="myClass class1">
  look at me!
</div>

Answer 2

如果您想要一个示例，此方法允许您添加更多类

 $(document).ready(function() {
 setInterval(function(){
$('.myClass.class1').toggleClass('class2 class3')
 }, 4000);
 });

Answer 3

我建议你将所有类存储在一个数组中并增加一个索引来旋转数组。

$(document).ready(function() {
  const allClasses = ['class1', 'class2', 'class3'];
  let index = 0;
  setInterval(function(){
    $('.myClass').removeClass(allClasses[index % 3]);
    index = index + 1;
    $('.myClass').addClass(allClasses[index % 3]);
  }, 4000);
});