Fatal编程技术网
  • javascript/
  • Javascript jQuery empty（）方法使我的<；元素>；不可点击？

Javascript jQuery empty（）方法使我的<；元素>；不可点击？

javascript jquery html css

Javascript jQuery empty（）方法使我的<；元素>；不可点击？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在尝试使用HTML/CSS/Javascript/jquery创建一个tic-tac-toe游戏。我有一个重置按钮，可以清除网格中的内容。按下重置按钮后，网格的内容将被清除，但我无法单击网格再次选择我的位置。我的重置按钮具有以下代码： $('#reset').click(function(){ $('.cells').empty(); //board_make(); }); 我的网格/板是使用下面的代码创建的。基本上，它为网格中的每个单元创建元素，每个单元都有一类“单元

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

 $('#reset').click(function(){
   $('.cells').empty();
     //board_make();
 });
我的网格/板是使用下面的代码创建的。基本上，它为网格中的每个单元创建元素，每个单元都有一类“单元”

功能板_make（）{
对于（变量i=0；i<3；i++）{
数组[i]=新数组（3）；
对于（var j=0；j<3；j++）{
数组[i][j]=“A”；
如果（j==2）{
$（'.board'）.append（“
最后，这是每当单击网格中的单元格时执行的代码：

$('.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;
    }  
 });

$（'.cells'）。单击（函数（）{
if（$（this）.text（）！=符号）{
var a=parseInt（$（this）.text（）[0]，10）；
var b=parseInt（$（this）.text（）[1]，10）；
数组[a][b]=符号；
$（this.html（“
”+symbol+“
”）；
}
否则{
警惕（“现场拍摄。选择另一个现场”）；
}
如果（（winner_found==false）和&（hor_match（）| | ver_match（）| | diag_match（））{
警报（“找到匹配项！”）；
winner_found=真；
}  
});
下面是正在进行的工作的链接以及代码：。

编辑-下面的内容不是问题所在。问题似乎是，当清除单元格时，您正在清除隐藏在其中的索引值。也就是说，您正在删除隐藏的
标记

使用jQuery
.data（）
机制，而不是将索引粘贴在其中：

var cell = ${'<div/>', {'class': 'cells'});
cell.data('x-index', i).data('y-index', j);
$('.board').append(cell);
按如下方式设置事件处理程序：

$('body').on('click', '.cells', function() { ...
清空容器时，所有元素都将丢失，事件处理程序也随之丢失。通过在没有被核化的外部元素上设置处理程序，处理程序在网格重建后仍然有效

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

$('.board').on('click', '.cells', function() { ...
编辑-下面的内容不是问题所在。问题似乎是，当清除单元格时，您正在清除隐藏在其中的索引值。也就是说，您正在删除隐藏的
标记

使用jQuery
.data（）
机制，而不是将索引粘贴在其中：

var cell = ${'<div/>', {'class': 'cells'});
cell.data('x-index', i).data('y-index', j);
$('.board').append(cell);
按如下方式设置事件处理程序：

$('body').on('click', '.cells', function() { ...
清空容器时，所有元素都将丢失，事件处理程序也随之丢失。通过在没有被核化的外部元素上设置处理程序，处理程序在网格重建后仍然有效

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

$('.board').on('click', '.cells', function() { ...
问题是，您使用隐藏文本来指示单元格的行/列，但在清空单元格时删除了隐藏文本

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

“
有关代码的固定版本，请参见此处：

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

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

“
有关代码的固定版本，请参见此处：

  • 更改： 
    $（'.cells'）。单击（函数（）
    到 
    $（'.board'）。在（'click'，'.cells'，function'）上（
    使单击事件在重新渲染时处于活动状态

  • 将
    $（'.cells'）.empty（）；
    更改为
    $（'.board'）.empty（）；
    并重新渲染该板：

    董事会（make（）

  • 更改： 
    $（'.cells'）。单击（函数（）
    到 
    $（'.board'）。在（'click'，'.cells'，function'）上（
    使单击事件在重新渲染时处于活动状态

  • 将
    $（'.cells'）.empty（）；
    更改为
    $（'.board'）.empty（）；
    并重新渲染该板：

    董事会（make（）

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

    • 首先，不要预先定义数组的维度，使用数组文本而不是
      newarray
    • 接下来，使用DOM！在所有内容上编写HTML只会让事件处理程序丢失
    • 使用数据而不是解析节点的文本内容。或者只使用数组
    • 重置时，您实际上没有清除阵列。这可能是因为
      board\u make（）
      再次添加了所有内容；我不知道。最好实际删除整个内容，并使用
      board\u make（）
      重做一遍。也可以在其中添加事件处理程序，并保持一切良好和完整

    • 不是有效的HTML
    所以，考虑到这一点，我和现在的情况其实不一样……：（但你明白了，对吧？

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