jQuery的從一個隨機數添加一個類

Question

我試圖在我的代碼中向特定的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();
});

Answer 1

您不能像這樣調用setTimeout函數。

嘗試

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

Answer 2

嘗試將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();
});

Answer 3

如果您調試代碼（例如使用firebug），則會看到Error: useless setTimeout call (missing quotes around argument?)消息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);

看這里

Answer 4

您正在匿名函數中定義函數。 因此，在調用setTimeout時， kbadd和kbremove在全局范圍中不存在。

嘗試將函數定義移至$(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調用也存在問題。 我認為您實際上可以通過某種重構在一個函數中執行此操作。