[英]JQuery Adding a class from a random number
Im trying to add a class to a specific id tag in my code. 我试图在我的代码中向特定的id标签添加一个类。 The class is kb1, kb2, kb3, or kb4.
类别为kb1,kb2,kb3或kb4。 I want the JavaScript to pick a random number between 1 and 4 then apply that to the class to have it randomly add a class.
我希望JavaScript从1到4之间选择一个随机数,然后将其应用于该类以使其随机添加一个类。
All of this is done in a loop so that it will constantly add and remove classes every 30 seconds. 所有这些都是循环完成的,因此它将每30秒不断添加和删除类。
EDIT: My apologies, i was trying to explain my problem and didnt add a question. 编辑:我很抱歉,我试图解释我的问题,没有添加任何问题。 For some reason when this runs nothing happens.
由于某种原因,当它运行时什么也没发生。 No classes are added.
没有添加任何类。 Can you add classes based on random numbers, and if so why isnt what im trying to do working properly?
您可以基于随机数添加类吗?如果是这样,为什么我没有设法正常工作?
$(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();
});
You can't call a setTimeout
function like that. 您不能像这样调用
setTimeout
函数。
Try 尝试
timeoutID = window.setTimeout(function () {
kbremove(number);
}, 30000);
Try wrapping the functions within the setTimeout in a function ( demo ): 尝试将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();
});
If you debug your code (eg with firebug) you will see the message Error: useless setTimeout call (missing quotes around argument?)
. 如果您调试代码(例如使用firebug),则会看到
Error: useless setTimeout call (missing quotes around argument?)
消息Error: useless setTimeout call (missing quotes around argument?)
。 That means that you have to use a function in setTimeout
. 这意味着您必须在
setTimeout
使用一个函数。
Replace 更换
timeoutID = window.setTimeout(kbremove(number), 30000);
with 同
timeoutID = window.setTimeout(function() {kbremove(number);}, 30000);
An easiest way to write your script is 编写脚本的最简单方法是
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);
You are defining your functions inside of an anonymous function. 您正在匿名函数中定义函数。 Therefore
kbadd
and kbremove
do not exist in the global scope when your setTimeout
is called. 因此,在调用
setTimeout
时, kbadd
和kbremove
在全局范围中不存在。
Try moving your function definitions outside of your $(document).ready()
function, like this: 尝试将函数定义移至
$(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();
});
Also there is an issue with some of your setTimeout calls. 您的某些setTimeout调用也存在问题。 I think you can actually do this in one function with some refactoring.
我认为您实际上可以通过某种重构在一个函数中执行此操作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.