从数组中依次向元素添加和删除类

对于那些在我重新提出我的问题之前无法理解我的人。我有一个对应于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); 
}

UPDATE

我找到了解决办法。我为那些有同样问题的人发布它。我使用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(); 
}); 
}

来源

2016-07-26 Zuse

代码如下喜欢？ –

欢迎来到堆栈溢出。 [阅读此处]（http://stackoverflow.com/help/mcve）以获取有关如何创建最小，完整和可验证问题的更多信息。 – Toby

你可以尝试这样的事情

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>

来源

2016-07-26 00:42:46 Kld

的setTimeout（）是异步的，所以你的循环将遍历数组中的所有项目比赛，将所有的灯红，然后3秒钟后，setTimeout（）将几乎在同一瞬间点亮，熄灭灯光。

您可能需要的东西看起来更像是Kld的答案。使用setInterval（）以3秒为间隔调用一个函数，然后在那里执行addClass（）/ removeClass（）。如果removeClass（）在所有灯光上运行，那么最好使用addClass（）方法。

来源

2016-07-26 04:53:56 saille

，你可以尝试一下，如果你想使所有为红色，你可以删除的removeAll（），希望我可以帮你。（我的英文不好）

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

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

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

来源

2016-07-26 06:37:52 chenmi

从数组中依次向元素添加和删除类

回答

相关问题