1

こんにちは、div の行を点滅させようとしていますが、一度に1 つの div が点滅する必要があります (すべての div が同時に点滅するわけではありません [私はそれを行うことができます])。

信号機の仕組みのようなものです。各ライトはライトの列の一部であり、各ライトは一度に 1 つずつオン/オフされ、ループを通過します。私の場合、点滅は、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 よろしくお願いします

4

4 に答える 4

3

試す：

    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);

デモ

于 2013-09-15T09:14:11.510 に答える
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');
    }
于 2013-09-15T09:13:00.603 に答える
1

試す

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);

デモ:フィドル

于 2013-09-15T09:27:05.827 に答える
0

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 デモ

于 2013-09-15T09:40:13.537 に答える