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调用也存在问题。 我认为您实际上可以通过某种重构在一个函数中执行此操作。