游戏重置功能不起作用答案

【问题标题】：Reset function on game not working游戏重置功能不起作用
【发布时间】：2015-04-25 20:55:18
【问题描述】：

我一直在使用 Jquery 制作一个简单的瓷砖匹配游戏，一切都很好，除了游戏完成后它在单击模式框后没有正确重置）并且您不能再单击 div 再次玩。

查看游戏和代码请到http://codepen.io/acnorrisuk/pen/JdoGvP/ 我已经控制台记录了值数组，因此您可以在游戏中作弊以查看重置时会发生什么。

重置功能如下：

function newBoard() {
    // reset variables
    tiles_flipped = 0;
    temp_values.length = 0;
    tile_values.shuffle();
    tile1 = '';
    tile2 = '';
    $("#board").empty();
    $(".tile").removeClass("transform");
    $("#score").html("<p>Pairs Found: " + 0 + "</p>");
    // gives each div a unique tile number and inserts images
    for (var i = 0; i < tile_values.length; i++) {
        $("#board").append("<div class='flip-container flip'>\
                <div class='tile flipper' id='" + i + "'>\
                    <div class='front'></div>\
                    <div class='back'><img src='" +
            tile_values[i] + "'>\
                </div>\
            </div>\
        </div>");
    }
};

【问题讨论】：

标签： jquery reset

【解决方案1】：

当您创建一个新板时，您将删除所有磁贴元素（具有“磁贴”类的元素）。这些 tile 元素绑定了 click-handler，但新添加的 tile 元素没有绑定 click-handler。

您可以移动绑定点击处理程序的代码，使其位于newBoard() 函数内（在将磁贴元素添加到板后），但更好的方法是使用事件委托。通过事件委托，您可以将点击处理程序绑定到 #board 元素，该元素不会被删除和重新添加。但是处理程序仍然会被调用来处理 tile 元素。

只要改变这个：

$(".tile").on("click", function () {

到这个；

$("#board").on("click", '.tile', function () {

jsfiddle

注意：在 jsfiddle 中，我注释掉了打乱瓷砖的调用，以便更容易完成游戏。

【讨论】：

【解决方案2】：

由于您在newBoard 函数中将.tile 附加到#board，因此您需要delegate the click event：

// check if tiles match using a temporary array
$("#board").on("click", '.tile', function () { 
    ... 
});

Updated Pen

【讨论】：

【解决方案3】：

我能够让它工作，请参阅http://codepen.io/anon/pen/bdNpGK。

问题是您只在第一组卡片中添加了 onClick 函数。重置板时，您删除了所有旧卡，添加了新卡，但再也没有设置点击功能。它现在不是在 onClick 事件中使用匿名函数，而是在每次调用 reset 时添加适当的 on click 函数。

function newBoard() {
    ...

    $(".tile").on("click", onClick);
}



function onClick() {
    ...
}

【讨论】：

【解决方案4】：

使用$(document).on("click",".tile",function () {...});

http://jsfiddle.net/cnmzxL0a/

【讨论】：

【解决方案5】：

非常感谢您的所有回复。该问题现已通过以下方式解决：

$("#board").on("click", '.tile', function () { :)

【讨论】：