javascript - 按顺序向数组中的元素添加和删除类

Question

对于那些在我重新表述我的问题之前难以理解我的人。我有一个变量数组，对应 5 个 div 的 id。我试图让每个 div 一个接一个地改变颜色几秒钟，但在下一个 div 改变颜色之前颜色又变回来了(类似于交通灯或西蒙游戏上的灯)。我目前正在使用 for 循环来迭代每个数组项。我使用 jQuery 的 .addClass() 和 removeClass() 与 setTimeout 来尝试实现此效果。这是我的代码:

//CSS
.color{background-color: red;}
//JavaScript
var div1 = document.getElementById('divID');
etc...
var total = [div1, div2, div3, div4, div5];
for(var n=0; n<counter; n++){
$(total[n]).addClass("color");
setTimeout(function(){
$(total[n]).removeClass("color");
}, 3000);
}

更新

我找到了解决方案。我将其发布给那些遇到同样问题的人。我使用了 jQuery .delay()和.queue()创建每个 div 一次接收一个类的效果 .addClass()和.removeClass() 。感谢大家的帮助。

for(var n=0; n<counter; n++){
flash(n);
}
function flash(num){
var int = num + 1;
$(total[num]).delay(2000 * int).queue(function(){
$(this).addClass("light").delay(1000).queue(function(){
$(this).removeClass("light");
});
$(this).dequeue();
});
}

Answer 1

你可以尝试这样的事情

var color = ['green', 'red', 'yellow'];
var i = 0;
setInterval(function(){
  $('.light').css('background-color', color[i++ % color.length]);
}, 2000);

.light { width: 100px; height: 100px;}

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