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的效果，每个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>

Answer 2

setTimeout（）是异步的，所以你的循环将遍历数组中的所有项目，将所有灯光设置为红色，然后3秒后你的setTimeout（）将几乎在同一时刻点亮，转动关灯。

你可能想要一些看起来更像Kld答案的东西。使用setInterval（）以3秒的间隔调用一个函数，并在那里执行addClass（）/ removeClass（）。最好是removeClass（）对你所有的灯进行操作，addClass（）只对当前的灯进行操作。

Answer 3

你可以尝试一下，如果你想让所有都变红，你可以删除removeall（），希望我可以帮助你。（我的英语不好）

＆＃13;

//addClass()函数
function addClass(element,value){
	if(!element.className){
		element.className=value;
	}
	else{
		newClassName=element.className+" "+value;
		elem.className=newClassName;
	}
}
var divs=document.getElementsByTagName("div");
var j= -1;
function removeall(){
	for(var i=0;i<divs.length;i++){
		divs[i].className="";
	}
	
}
//自动播放函数
	function autoPlay ()
	{
		setInterval(function () {
			removeall();
			j++;
			addClass(divs[j],"red");	
		},2000);	
	}
autoPlay();

＆＃13;

div{
	width: 100px;
	height: 100px;
	border:1px solid black;
	float: left;
}
.red{
	background-color: red;
}

＆＃13;

<body>
	<div id="one"></div>
	<div id="two"></div>
	<div id="three"></div>
	<div id="five"></div>
	<div id="six"></div>
</body>

＆＃13;

从数组中按顺序添加和删除类

3 个答案: