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

尝试在函数（demo）中包装setTimeout中的函数：

$(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?)。这意味着您必须使用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);

请参阅here

Answer 4

您正在匿名函数中定义函数。因此，在调用kbadd时，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调用存在问题。我认为你可以通过一些重构在一个函数中实现这一点。

JQuery从随机数中添加一个类

4 个答案: