使用setInterval更改背景顏色

Question

嗨，我正在嘗試使一排div閃爍， 但是一個div應該一次閃爍 。（並非所有div都應該同時閃爍[我可以這樣做]）。

有點像交通信號燈的工作方式。 每盞燈都是一排燈的一部分，並且每盞燈都通過一個循環打開和關閉。 在我的情況下，閃爍是為了提醒用戶div或可點擊。

我把每個盒子放在一個數組中，但是我不知道如何在循環中改變每個盒子的顏色。 我猜想解決此問題的方法是添加和刪除包含顏色的類，並且應該在1或2秒鍾后執行此操作，以便setInterval可以播放。 我不知道。

但是這是我的悲傷代碼

            var arr =[];
        $(".boxes").each(function(){
            arr.push($(this));
        });     

      function bgChange(){

            for(i = 0; i < arr.length; i++){
            arr[i].addClass("red"); 
            }           
        }
            setInterval(bgChange, 2000);

    });

我期待着看到你們想出的創造性方法來完成這項工作。

JSFIDDLE謝謝高級

Answer 1

嘗試：

    var arr = $(".boxes");

    var current = 0;
    function bgChange(){
         if (arr.length > 0){
            //Remove class of all items
            arr.removeClass("red");
            //Set Class of current item
            arr.eq(current).addClass("red");     
            //Increase the current index
            current = (current + 1) % arr.length;
         }
    }
    setInterval(bgChange, 2000);

演示

Answer 2

您可以嘗試使用以下代碼進行操作。 演示版

$(document).ready(function () {
    var arr = [];
    var i = 0;

    $(".boxes").each(function () {
        arr.push($(this));
    });

    function bgChange() {
        for (var count = 0; count < arr.length; count++) {
            if (i == count) arr[count].css('background-color', 'red');
            else arr[count].css('background-color', 'white');
        }
        i++;
        if (i === arr.length) i = 0;
    }
    setInterval(bgChange, 2000);

});

編輯：如果您想通過使用CSS類來做到這一點，修改for循環，如下所示：

    for (var count = 0; count < arr.length; count++) {
        if (i == count) arr[count].addClass('red');
        else arr[count].removeClass('red');
    }

Answer 3

嘗試

var $boxes = $(".boxes");

function bgChange(){
    var $active = $boxes.filter('.red'), $next = $active.next('.boxes');
    if(!$next.length){
        $next = $boxes.first();
    }

    $active.removeClass('red');
    $next.addClass('red');
}
setInterval(bgChange, 2000);

演示： 小提琴

Answer 4

您可以使用toggleClass來設置當前框的類：

var boxes = $(".boxes");
var current = 0;

function animate() {
    boxes.each(function(index) {
        $(this).toggleClass("red", index == current);
    });
    current = (current + 1) % boxes.length;
    setTimeout(animate, 1000);
};

animate();

jsFiddle演示