從數組中按順序向元素添加和刪除類

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