1

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

 $('#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。

4

4 回答 4

2

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

"<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

于 2012-12-26T20:09:05.013 回答
1

编辑-下面的不是问题。问题似乎是在清除单元格时，您正在清除隐藏在其中的索引值。也就是说，您正在删除隐藏的<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() { ...
于 2012-12-26T19:59:13.240 回答
1

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

  • 首先，不要费心事先定义数组的维度，并使用数组文字而不是new Array. JavaScript 大多忽略了这一点，它可能会导致奇怪的错误。
  • 接下来，使用 DOM！在所有内容上编写 HTML 只是要求丢失事件处理程序。
  • 使用数据而不是解析节点的文本内容。或者只是使用您的阵列。
  • 重置时您实际上并没有清除数组。这可能是因为board_make()再次添加了所有内容；我不知道。最好实际删除整个东西，然后board_make()重新制作。也可以在其中添加事件处理程序，并保持一切正常和包含。
  • </br>不是有效的 HTML。

所以，考虑到这一点，我改变了一些东西，现在它不一样了...... :(但你明白了，对吧？

于 2012-12-26T20:25:04.650 回答
0

  1. 更改： $('.cells').click(function() 以 $('.board').on('click', '.cells', function() 使单击事件在重新渲染时处于活动状态。

  2. 更改$('.cells').empty();并$('.board').empty();重新渲染电路板：

    board_make();

JSBin

于 2012-12-26T20:16:02.490 回答