Question

我正在尝试创建一个简单的游戏，其中包含一个选择随机div（在选择之外）的功能，然后使用间隔设置随机倒计时，当倒计时命中0时，该div的类将发生变化。然后我就拥有它，所以当你点击分配了该类的东西时，它将变回原来的类。

当我运行我的代码时，div在倒计时后似乎正在改变，但是当我点击它们时它们不会改变。但我的主要问题是改变随机div的主要功能只运行一次。

div（“box”）以.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

问题在于您如何约束click事件。您需要delegate该事件，而不是使用click()。

当setInterval运行时，它会向元素添加一个“新”类。但是，由于没有元素具有该类名（在$ 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/ （当块变为绿色时，单击它。然后等待它再次变为红色并单击...）

（Tilwin编辑了他的答案，删除了.click setInterval。他编辑的答案更好，但仍然有缺点 - 它需要n个事件绑定。适用于简单的游戏，但如果你的游戏有1000个方块，你将拥有1000个事件处理程序）

Answer 2

“但我的主要问题是改变随机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");
  });
});

使用带间隔的函数来改变div的类？

2 个答案: