JQuery 난수에서 클래스 추가

내 코드의 특정 ID 태그에 클래스를 추가하려고합니다. 클래스는 kb1, kb2, kb3 또는 kb4입니다. 자바 스크립트에서 1에서 4 사이의 임의의 숫자를 선택하여 클래스에 무작위로 추가하여 클래스를 추가하도록합니다.JQuery 난수에서 클래스 추가

이 모든 작업이 반복되어 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(); 
});

출처

2013-05-09 John Ayers

here를 볼 수 있습니다 교체? – eidsonator

'number'를 선언 한 적이 있습니까? 콘솔에 오류가 있습니까? – tymeJV

함수 (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(); 
});

출처

2013-05-09 14:34:12 Mottie

대단히 고마워요. 그것은 정확히 문제였습니다. –

익명 함수 내에서 함수를 정의하고 있습니다. 따라서 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 호출의 일부에 문제가 있습니다. 실제로 리팩터링을 사용하여 하나의 함수에서이 작업을 수행 할 수 있다고 생각합니다.

출처

2013-05-09 14:33:02 nullability

setTimeout과 같은 기능을 호출 할 수 없습니다.

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

출처

2013-05-09 14:33:19

을 당신이 당신의 코드를 디버깅하는 경우 (예를 들어 불을 지르고와) 당신은 메시지 Error: useless setTimeout call (missing quotes around argument?)를 볼 수 있습니다. 즉, setTimeout에 함수를 사용해야합니다.

는

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

와

timeoutID = window.setTimeout(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-09 14:47:19 pbaris

JQuery 난수에서 클래스 추가

답변

관련 문제