Question

我一直在使用Jquery制作一个简单的瓷砖匹配游戏，一切都没问题，除非在游戏完成后单击模态框后没有正确重置）你不能再点击div再玩一次。 / p>

要查看游戏和代码，请转到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>");
    }
};

Answer 1

在创建新电路板时，您将删除所有磁贴元素（具有“tile”类的元素）。那些tile元素将click-handler绑定到它们，但新添加的tile元素没有绑定到它们的click处理程序。

您可以移动绑定点击处理程序的代码，使其位于while(getline(fin,line))函数内（将tile元素添加到板后），但更好的方法是使用事件委派。使用事件委派，您可以将单击处理程序绑定到newBoard()元素，该元素不会被删除并重新添加。但仍然会为tile元素调用处理程序。

只需改变一下：

#board

对此;

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

jsfiddle

注意：在jsfiddle中我注释了调用瓦片以便更容易完成游戏。

Answer 2

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

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

<强> Updated Pen

Answer 3

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

问题是你只是将onClick功能添加到第一组卡片中。当您重置电路板时，您删除了所有旧卡，添加了新卡，但从未再次设置点击功能。而不是onClick事件中的匿名函数，它现在每次调用reset时都会添加相应的on click函数。

function newBoard() {
    ...

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



function onClick() {
    ...
}

Answer 4

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

http://jsfiddle.net/cnmzxL0a/

Answer 5

非常感谢您的所有回复。现在使用以下方法解决了该问题：

$（“＃board”）。on（“click”，“。strong”，function（）{ ：）

游戏无效时重置功能

5 个答案: