Add and remove class to elements in sequence from array
Question
For those who had trouble understanding me before I rephrased my question. I have an array of variables that corresponds to the ids of 5 divs. I am trying to make each div change color for a few seconds one by one but the color changes back before the next div changes color (similar to the lights on a traffic light or a game of Simon). I am currently using a for loop to iterate through each array item. I am using jQuery's .addClass() and removeClass() with setTimeout to try to achieve this effect. Here is my code:
//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
I found a solution. I am posting it for those who are having the same problem. I used jQuery .delay() and .queue() to create the effect of each div receiving the class one at a time with .addClass() and .removeClass() . Thank you to everyone for your help.
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();
});
}
3 answers
solution1
0 2016-07-26 00:42:46
You can try something like this
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>
solution2
0 2016-07-26 04:53:56
setTimeout() is asynchronous, so your loop will race through all items in the array, set all your lights red, then 3 seconds later your setTimeout()'s will all fire at almost the same instant, turning the lights off.
You might want something that looks more like Kld's answer. Use setInterval() to call a function at 3 second intervals, and do your addClass() / removeClass() in there. It may be best if removeClass() operates on all your lights, addClass() on the current one only.
solution3
0 2016-07-26 06:37:52
you can try it ,if you want make all be red,you can remove the removeall(),hope i can help you.(my English is not good)
//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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.