0

コード内の特定の id タグにクラスを追加しようとしています。クラスは kb1、kb2、kb3、または kb4 です。JavaScript で 1 から 4 までの乱数を選択し、それをクラスに適用してランダムにクラスを追加するようにします。

これはすべてループで行われるため、30 秒ごとにクラスが常に追加および削除されます。

編集:申し訳ありませんが、私は自分の問題を説明しようとしていて、質問を追加しませんでした。これを実行すると、何らかの理由で何も起こりません。クラスは追加されません。乱数に基づいてクラスを追加することはできますか?

$(document).ready(function() {
 function kbadd() {
  number = 1 + Math.floor(Math.random() * 4);  
   $("#kb1").addClass("kb"+number);
   $("#kb2").addClass("kb"+number);
   $("#kb3").addClass("kb"+number);
   $("#kb4").addClass("kb"+number);
   timeoutID = window.setTimeout(kbremove(number), 30000);
   }
 function kbremove(number) {
  $("#kb1").removeClass("kb"+number);
  $("#kb2").removeClass("kb"+number);
  $("#kb3").removeClass("kb"+number);
  $("#kb4").removeClass("kb"+number);
  timeoutID = window.setTimeout(kbadd, 1);
  }
kbadd();
});
4

4 に答える 4

1

コードを (たとえば firebug で) デバッグすると、メッセージが表示されますError: useless setTimeout call (missing quotes around argument?)。つまり、 で関数を使用する必要がありますsetTimeout。

交換

timeoutID = window.setTimeout(kbremove(number), 30000);

と

timeoutID = window.setTimeout(function() {kbremove(number);}, 30000);

スクリプトを作成する最も簡単な方法は次のとおりです。

function kbadd() {
    number = 1 + Math.floor(Math.random() * 4);  
    $('#kb1, #kb2, #kb3, #kb4').addClass('kb' + number);
    window.setTimeout(function() { kbremove(number); }, 30000);
}

function kbremove(number) {
    $('#kb1, #kb2, #kb3, #kb4').removeClass('kb' + number);
    window.setTimeout(kbadd, 1);
}

$(document).ready(kbadd);

ここを参照

于 2013-05-09T14:47:19.263 に答える
1

関数内の setTimeout 内の関数をラップしてみてください ( demo ):

$(function () {
    function kbadd() {
        var number = 1 + Math.floor(Math.random() * 4);
        $("#kb1, #kb2, #kb3, #kb4").addClass("kb" + number);
        window.setTimeout(function() { kbremove(number) }, 30000);
    }

    function kbremove(number) {
        $("#kb1, #kb2, #kb3, #kb4").removeClass("kb" + number);
        kbadd();
    }
    kbadd();
});
于 2013-05-09T14:34:12.353 に答える
0

無名関数内で関数を定義しています。したがってkbadd、 andが呼び出されkbremoveたとき、グローバル スコープには存在しません。setTimeout

次のように、関数定義を関数の外に移動してみてください$(document).ready()。

function kbadd() {
    var number = 1 + Math.floor(Math.random() * 4);  
    $("#kb1").addClass("kb"+number);
    $("#kb2").addClass("kb"+number);
    $("#kb3").addClass("kb"+number);
    $("#kb4").addClass("kb"+number);
    timeoutID = window.setTimeout(function() { kbremove(number); }, 30000);
}
function kbremove(number) {
    $("#kb1").removeClass("kb"+number);
    $("#kb2").removeClass("kb"+number);
    $("#kb3").removeClass("kb"+number);
    $("#kb4").removeClass("kb"+number);
    timeoutID = window.setTimeout(kbadd, 1);
}

$(document).ready(function() {
    kbadd();
});

また、一部の setTimeout 呼び出しにも問題があります。実際には、リファクタリングを行うことで 1 つの関数でこれを行うことができると思います。

于 2013-05-09T14:33:02.733 に答える