javascript - for 循环中的 onclick 事件一定次数

Question

我以为这个onClick event in a For loop会对我有帮助，但当我尝试时，它仍然不起作用。

我正在制作一个简单的战舰游戏，当我试图让用户仅单击 4 个方 block 来放置在船上时，循环会继续进行，并且在 4 次尝试后不会停止。我的 onclick 事件处理程序位于 for 循环中，但尝试 4 次后它不会停止。我尝试在结束后添加一个计数变量，甚至尝试添加一个break语句，但无法让它工作。

这是我的代码:

    function placeShips() {
        var playerTable = document.getElementById("mainPlayer");
        var playerCells = playerTable.getElementsByTagName("td");
        var count = 1;

        alert("Please place the first ship. Click on 4 squares.");
        while (count <= 4) {
            for (i = 0; i < playerCells.length; i++) {
                playerCells[i].onclick = placeBattleship;
            }
            count++;
        }
    }

placeBattleship 函数包含将网格方 block 更改为红色背景色以对其进行标记的代码。我的问题是，一旦用户点击了 4 个方 block ，您就可以继续点击越来越多的方 block 。我无法获得上面的 for 循环，该循环在用户单击 4 个方 block 后调用 placeBattleship 函数来停止。我尝试将其放入 while 循环中，甚至是上面链接中的解决方案，以及移动 count 的分配，但无法让它在 x 次后停止(在本例中为 4 次)。

对我做错了什么有什么想法，或者更好的方法吗？

Answer 1

您不考虑使用 jQuery 吗？

让你的函数变得更短:

function placeShips() {
    $("td:lt(4)").click(placeBattleship);
}

您可以用下面的代码作证:

  <table>
    <tr>
      <td>1.1</td><td>2.1</td>
    </tr>
    <tr>
      <td>1.2</td><td>2.2</td>
    </tr>
    <tr>
      <td>1.3</td><td>2.3</td>
    </tr>
  </table>
  <div id="console"></div>
  <script>
  $("td:lt(4)").each(function(){
    $("#console").append("Content of "+ $(this).html() + "<br/>");
  });

  $("td:lt(4)").click(function(){
    $("#console").append("Clicking "+ $(this).html() + "<br/>");
  });
  </script>

...或者在我的 Plunker 上:https://plnkr.co/edit/yNZw6ZhkNfA9E0NdQg7V