javascript - 三个不同类之间的toggleClass

Question

我试图每 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>