Question

我正在尝试使用HTML / CSS / Javascript / jquery创建一个tic-tac-toe游戏。我有一个重置按钮，清除网格的内容。按下重置按钮后，网格的内容被清除，但我无法点击我的网格再次选择我的位置。我的重置按钮具有以下代码：

 $('#reset').click(function(){
   $('.cells').empty();
     //board_make();
 });

我的网格/电路板是使用以下代码创建的。基本上它为网格中的每个单元格创建元素，每个单元格都有一类“单元格”。

function board_make(){
  for (var i = 0; i < 3; i ++){
    array[i] = new Array(3);
    for (var j = 0; j < 3; j ++){
      array[i][j] = "A" ;
      if(j == 2){
        $('.board').append("<div class='cells'><p class='hidden'>"+i.toString()+j.toString()+"</div></br></br></br>");
      }
      else{
      $('.board').append("<div class='cells'><p class='hidden'>"+i.toString()+j.toString()+"</div>");
      }
    }
  }
}

最后，这是在点击网格中的单元格时执行的代码：

$('.cells').click(function(){
    if ($(this).text() != symbol){
      var a = parseInt($(this).text()[0],10);
      var b = parseInt($(this).text()[1],10);
      array[a][b] = symbol;
      $(this).html("<p class='shown'>"+symbol+"</p>");
    }
    else{
      alert("Spot taken. Pick another spot.");
    }
    if ((winner_found === false) && (hor_match() || ver_match() || diag_match())){
        alert("Match found!");
        winner_found = true;
    }  
 });

以下是正在进行的工作的链接以及代码：http://jsbin.com/inazog/6/edit。

Answer 1

问题是您使用隐藏文本来指示单元格的行/列，但在清空单元格时删除隐藏文本。

"<div class='cells'><p class='hidden'>"+i.toString()+j.toString()+"</div>"

var a = parseInt($(this).text()[0],10);  // $(this).text() is "" after you clear the cells.
var b = parseInt($(this).text()[1],10);

请在此处查看代码的固定版本：http://jsbin.com/inazog/13/edit

Answer 2

编辑 - 以下内容不是问题。问题似乎是清除单元格时，您将清除其中隐藏的索引值。也就是说，您要删除隐藏的<p>标记。

不要将索引粘贴在那里，而是使用jQuery .data()机制：

var cell = ${'<div/>', {'class': 'cells'});
cell.data('x-index', i).data('y-index', j);
$('.board').append(cell);

然后，您可以获取单元格的索引值，而无需保留隐藏元素。

不是问题，但不是一个坏主意：

而不是

$('.cells').click(function(){

设置事件处理程序，如下所示：

$('body').on('click', '.cells', function() { ...

当您清空容器时，所有元素都将丢失，并随之使用事件处理程序。通过在未获取核心的外部元素上设置处理程序，处理程序在重建网格后仍然有效。

如果您愿意，还可以将事件处理程序放在“.board”容器中：

$('.board').on('click', '.cells', function() { ...

Answer 3

这里存在很多问题或潜在问题。

首先，不要事先定义数组的维度，并使用数组文字而不是new Array。 JavaScript大多忽略了这一点，它可能导致奇怪的错误。
接下来，使用DOM！在所有内容上编写HTML只是要求丢失事件处理程序。
使用数据而不是解析节点的文本内容。或者只是使用你的阵列。
重置时，您实际上并未清除阵列。这可能是因为board_make()再次添加了所有内容;我不知道。实际上删除整个内容会更好，让board_make()再次完成所有操作。也可以在那里添加事件处理程序，并保持一切美观和包含。
</br>无效HTML。

所以，考虑到这一点，我changed some things现在它并不是真的相同...... :(但你明白了，对吗？

Answer 4

变化： $('.cells').click(function() 至 $('.board').on('click', '.cells', function() 这样点击事件在重新渲染时仍然存在。
将$('.cells').empty();更改为$('.board').empty();并重新呈现电路板：

board_make（）;

JSBin

jQuery empty（）方法使我的<element>无法点击？</element>

4 个答案: