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

Question

对于那些在我重新提出问题之前仍无法理解我的人。 我有一个变量数组，对应于5个div的ID。 我正在尝试使每个div逐一更改颜色几秒钟，但是在下一个div更改颜色之前，颜色会变回原来的颜色（类似于交通信号灯或Simon游戏中的灯）。 我目前正在使用for循环来遍历每个数组项。 我正在使用带有setTimeout的jQuery .addClass（）和removeClass（）来尝试实现此效果。 这是我的代码：

//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>

Answer 2

setTimeout（）是异步的，因此您的循环将遍历数组中的所有项目，将所有指示灯设置为红色，然后3秒后，setTimeout（）的指示灯将几乎在同一瞬间全部点亮，从而将指示灯关闭。

您可能想要看起来更像Kld的答案的东西。 使用setInterval（）每隔3秒调用一次函数，然后在其中执行addClass（）/ removeClass（）。 最好是将removeClass（）操作在您所有的灯光上，而addClass（）仅在当前的灯光上操作。

Answer 3

您可以尝试一下，如果要全部变成红色，可以删除removeall（），希望我能为您提供帮助。（我的英语不好）

 //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();

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

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

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

问题描述

3 个解决方案

解决方案1
0 2016-07-26 00:42:46

解决方案2
0 2016-07-26 04:53:56

解决方案3
0 2016-07-26 06:37:52

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

问题描述

3 个解决方案

解决方案1 0 2016-07-26 00:42:46

解决方案2 0 2016-07-26 04:53:56

解决方案3 0 2016-07-26 06:37:52

解决方案1
0 2016-07-26 00:42:46

解决方案2
0 2016-07-26 04:53:56

解决方案3
0 2016-07-26 06:37:52