ToggleClass между тремя разными классами

Я пытаюсь переключаться между тремя классами каждые 4 секунды, но я не могу понять, как получить работу третьего класса. Это то, что я до сих пор (что работает)

$(document).ready(function() {
 setInterval(function(){
 $('.myClass.class1').toggleClass('class2')
 }, 4000);
});
3 ответа

Если вы можете использовать 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;
}
<div>
 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;
}
<div>
 look at me!
</div>


Я предлагаю вам хранить все классы в массиве и увеличивать индекс для вращения по массиву.

$(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);
});


этот метод позволяет добавлять дополнительные классы, если вы хотите использовать пример

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

licensed under cc by-sa 3.0 with attribution.