配列から要素を順番に追加して削除する

私の質問に言い換える前に私を理解できなかった人のために。私は5つのdivのIDに対応する変数の配列を持っています。私は各divを色々に色を数秒間変化させようとしていますが、次のdivの色が変わる前に色が元に戻ります（信号機のライトやSimonのゲームに似ています）。私は現在、forループを使用して各配列アイテムを反復処理しています。私はこの効果を達成するために、jQueryの.addClass（）とsetClass（）を使用しています。ここに私のコードは次のとおりです。配列から要素を順番に追加して削除する

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

私は解決策を見つけました。私は同じ問題を抱えている人のためにそれを掲示しています。私は.addClass()と.removeClass()で一度にクラス1を受け、それぞれのdivの効果を作成するためのjQuery .delay()と.queue()を使用しました。皆さん、ありがとうございました。

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

あなたのコードのルックス好き？ –

ようこそスタックオーバーフロー。 Minimal、Complete、Verifiableの質問の作成方法の詳細については、[こちらを読む]（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

配列から要素を順番に追加して削除する

答えて

関連する問題