JavaScript未捕获TypeError：无法设置未定义的属性'-1'

Question

我正在练习jquery，并且正在尝试构建一个非常基本的Tic Tac Toe游戏。

我想设置我的html表格等同于数组形式的网格索引，并根据玩家的点击更改它们的值。目前，我的颜色变化取决于轮到的工作，但我一直得到这个Uncaught TypeError引用在我的条件语句中表示board[row][col] = x的行。

我的代码：

$(document).ready(function(event) { 

    var count = 0; 

    var board = [ 
     [0, 0, 0], 
     [0, 0, 0], 
     [0, 0, 0] 
    ]; 

    var row = $(this).parent().index(); 
    var col = $(this).index(); 

    $('td').click(function() { 
     // if count is even, player 1 is yellow 
     // if count is odd, player 2 is blue 
     if (count % 2 === 0) { 
      $(this).addClass('yellow'); 
      count++; 
      board[row][col] = 1; 
     } else { 
      $(this).addClass('blue'); 
      count++; 
      board[row][col] = 2; 
     } 
    }); 
}); 

相关的html：

<div id="main_container"> 
    <h1 id="main_heading" class="heading" >Tic! Tac! Toe!</h1> 
    <h2 id="winning"></h2> 
    <table> 
     <tbody> 
      <tr class="box_row" > 
       <td id="box_0_0" class="box_cell" data-row="0" data-col="0" data-clicked="0"></td> 

       <td id="box_0_1" class="box_cell" data-row="0" data-col="1" data-clicked="0"></td> 

       <td id="box_0_2" class="box_cell" data-row="0" data-col="2" data-clicked="0"></td> 
      </tr> 
      <tr class="box_row"> 
       <td id="box_1_0" class="box_cell" data-row="1" data-col="0" data-clicked="0"></td> 

       <td id="box_1_1" class="box_cell" data-row="1" data-col="1" data-clicked="0"></td> 

       <td id="box_1_2" class="box_cell" data-row="1" data-col="2" data-clicked="0"></td> 
      </tr> 
      <tr class="box_row"> 
       <td id="box_2_0" class="box_cell" data-row="2" data-col="0" data-clicked="0"></td> 

       <td id="box_2_1" class="box_cell" data-row="2" data-col="1" data-clicked="0"></td> 

       <td id="box_2_2" class="box_cell" data-row="2" data-col="2" data-clicked="0"></td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

相关CSS：

.yellow { 
    background-color: #ffc300; 
} 

.blue { 
    background-color: #73d2c9; 
} 

Answer 1

的问题是，你正在阅读的索引值，你需要阅读它点击处理器内部

$(document).ready(function (event) { 

    var count = 0; 

    var board = [ 
     [0, 0, 0], 
     [0, 0, 0], 
     [0, 0, 0] 
    ]; 

    //here this is the document object 
    $('td').click(function() { 

     //reading index values should be inside the click handler, here `this` refers to the clicked `td` element 
     var row = $(this).parent().index(); 
     var col = $(this).index(); 


     // if count is even, player 1 is yellow 
     // if count is odd, player 2 is blue 
     if (count % 2 === 0) { 
      $(this).addClass('yellow'); 
      count++; 
      board[row][col] = 1; 
     } else { 
      $(this).addClass('blue'); 
      count++; 
      board[row][col] = 2; 
     } 
    }); 
});