使用具有間隔的函數來更改div的類？

Question

我試圖創建一個簡單的遊戲，它有一個功能，可以隨機選擇一個div（選擇之外），然後使用間隔設置一個隨機倒計時，當倒計數達到0時，該div的類將改變。 然後，我有它，所以當你點擊與該類分配的東西時，它會改回原來的類。

當我運行我的代碼的時候divs似乎在倒計時之後發生了變化，但是當我點擊它們時不會改變。 但我的主要問題是，更改隨機div的主要功能只能運行一次。

的DIV（ 「箱子」）開始作爲.wait

我的代碼：

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); 

更新：

假設你DIV固定數量的，你可以在頁面加載指定一個共同的處理程序，所有的人像

$(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那個事件，而不是使用click()。

當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元素隨機選擇，你的DOM可能類似於：

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

更糟的是，每次的jQuery調用click處理程序，你迫使瀏覽器觸摸DOM（取決於遊戲，這可能是壞的！）

下面是一個例子：http://jsfiddle.net/pjMcv/ （當一個塊變成綠色，單擊它，然後等待它再次變成紅色，然後點擊。 ..）

（蒂爾溫已編輯他的答案，刪除.click滿分爲setInterval。他編輯的答案是更好的，但它仍然有一個缺點 - 它需要n個事件綁定。適用於簡單遊戲，但如果您的遊戲有1000個方塊，則您將有1000個事件處理程序）