간격이있는 함수를 사용하여 div 클래스를 변경 하시겠습니까?

Question

임의의 div (선택 항목에서 선택)를 선택한 다음 간격을 사용하여 임의의 카운트 다운을 설정하고 카운트 다운이 0이되면 해당 div의 클래스가 변경되는 간단한 게임을 만들려고합니다. 그런 다음 클래스에 할당 된 항목을 클릭하면 원래 클래스로 다시 변경됩니다.

내 코드를 실행하는 순간 div가 카운트 다운 이후에 변경되는 것 같지만 클릭 할 때 변경되지 않습니다. 하지만 내 주요 문제는 임의의 div를 변경하는 주 기능은 한 번만 실행된다는 것입니다.

div의 ("박스")를 시작 .wait

내 코드로 : 당신이 당신의 click 이벤트를 바인딩하는 방법

var react = function(){ 
    var box = parseInt(Math.random()*64); 

    while($("box"+box).hasClass("now")) { 
     box = parseInt(Math.random()*64); 
    } 

    var timer = parseInt((Math.random()*10)+2); 

    var countdown=setInterval(function(){ 
     timer-=1 
     $("#box"+box).text(parseFloat(timer.toFixed(0))); 

     if(timer<=0){ 
      clearInterval(countdown) 
      $("#box"+box).text(""); 
      $("#box"+box).text(""); 
      $("#box"+box).removeClass("wait"); 
      $("#box"+box).addClass("now"); 
     } 
    },1000) 
} 

$(document).ready(function(){ 
    //paint\\ 
    //$(".wait").click(function() { 
    //$(this).toggleClass("now") 
    //}) 
    //paint\\ 

    setInterval(react(),1000); 

    $(".now").click(function(){ 
     $(this).removeClass("now"); 
     $(this).addClass("wait"); 
    }) 
}) 

Answer 1

"하지만 내 주요 문제는 임의의 div를 변경하는 주 기능이 한 번만 실행된다는 것입니다."

다음 행을 언급한다고 가정합니다.

setInterval(react, 1000); 

업데이트 : 다음과 같이

setInterval(react(), 1000); 

하는 수정

당신이 사업부의 고정 된 수를했습니다 가정, 당신은 페이지로드에 그들 모두를위한 공통의 핸들러를 할당 할 수 있습니다 like

$(document).ready(function(){ 
    $('your-common-div-selector').click(function(){ 
    if($(this).hasClass("now")&& !$(this).hasClass("wait")) { 
     this.removeClass("now"); 
     this.addClass("wait"); 
    }); 
}); 

Answer 2

문제입니다. click()을 사용하는 대신 delegate 이벤트를 원할 것입니다.

setInterval이 실행되면 요소에 'new'클래스가 추가됩니다. 그러나 클래스 이름을 가진 요소가 없으므로 ($ doc.ready에서 click()을 호출 할 때) 처리기가 트리거되지 않습니다. http://jsfiddle.net/yvvMp/이

여기에 이벤트 위임 + 코드를 사용하는 예제입니다 :

첫째, 바이올린 보여주는이 작품

가

var react = function(){ 
    var box = parseInt(Math.random()*64); 

    while($("#box"+box).hasClass("now")) { 
     box = parseInt(Math.random()*64); 
    } 

    var timer = parseInt((Math.random()*10)+2); 

    var countdown=setInterval(function(){ 
     var $el = $('#box' + box); 

     timer-=1 
     $el.text(parseFloat(timer.toFixed(0))); 

     if(timer<=0){ 
      clearInterval(countdown); 

      $el.text("") 
       .removeClass("wait") 
       .addClass("now"); 
     } 
    },1000); 
} 

$(document).ready(function(){ 
    $parent = $('.parent-to-now-elements') // $('body') works, but not as efficient 
    setInterval(react, 1000); 

    $parent.on('click', '.now', function(){ 
     $(this).removeClass("now"); 
     $(this).addClass("wait"); 
    }) 
}) 

Tilwin의 대답은 작동을하지만 기회로 실행하는 것과 같은 요소 여러 개의 이벤트 핸들러가 바인딩 될 수 있습니다. 당신이있어,

<div class='wait wait wait wait wait wait wait wait wait'></div>

더 나쁜이, 때마다 jQuery를이 클릭 핸들러를 호출 : 게임 실행, 그리고 얼마나 자주 사용자가 동일한 DIV 요소를 무작위로 선택됩니다 시간에 따라, 당신의 DOM 같은 것을 볼 수 있었다 브라우저가 DOM을 터치하도록 강요합니다 (게임에 따라 문제가 될 수 있습니다.)

예 : http://jsfiddle.net/pjMcv/ (블록이 녹색으로 바뀌면 클릭하고 다시 빨간색으로 바뀔 때까지 기다리십시오. ..)

(Tilwin이 답변을 수정하고 중에서 .click입니다. 그의 편집 된 대답은 더 좋지만 여전히 단점이 있습니다 - n 개의 이벤트 바인딩이 필요합니다. 단순한 게임에서는 작동하지만 게임의 경우 1000 개의 이벤트 핸들러가 있습니다.