for循环中的onclick事件一定次数答案

【问题标题】：onclick event in a for loop certain amount of timesfor循环中的onclick事件一定次数
【发布时间】：2016-04-11 02:30:37
【问题描述】：

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

我正在制作一个简单的 Battleship 游戏，当我试图让用户只点击 4 个方格以放置在船上时，循环继续进行，并且在 4 次尝试后不会停止。我在 for 循环中有我的 onclick 偶数处理程序，但是在 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 函数包含将网格正方形更改为红色背景色以标记它的代码。我的问题是，一旦用户点击了 4 个方格，您就可以继续点击更多。在用户单击 4 个方格后，我无法获得调用 placeBattleship 函数停止的上述 for 循环。我试过把它放在一个while循环中，甚至是上面链接中的解决方案，以及移动计数的分配，但不能让它在x次后停止（在这种情况下，4次）。

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

【问题讨论】：

每次运行循环时都会将计数重置为 1
操作。您不只是将 placeBattleShip 功能附加到每个单元格的 onclick 上吗？您不想在玩家点击 4 个单元格后“取消附加”处理程序吗？
@pathfinder 我是否在 while 循环中声明计数？我尝试在 for 循环中移动 count++，但这似乎也不起作用。
@stripathi 我想我不知道该怎么做。有没有办法做到这一点？
在计算已单击的单元格数为 4 后尝试分配 onclick = null。您的计数必须是比订阅/取消订阅事件的函数生命周期更高的变量。我会举一个例子，但我现在太累了。如果没有其他人会在明天发布答案。

标签： javascript html

【解决方案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

【讨论】：

这没有做任何事情。
您能否将您的代码发布到Fiddle 或Plunker
好吧，它没有出现，但希望你能明白它的要点：plnkr.co/edit/0OnnUYKnUlTGQH5oaru3
所以，我删除了 :lt(4) ，因为您在战场之外的其他地方还有一些 td。现在你可以点击任何方块，它会变成红色：plnkr.co/edit/PzfjnfEXIgOxS16Qt7Gx?p=preview
当然我做了很多改变哈哈..你可以看到你点击功能也更干净了：function placeBattleship() { $(this).css("background-color", "red"); }

【解决方案2】：

所以，现在我们有了一个解决方案，可以在第 4 次点击方块时停止：

function placeBattleship() {
  var $shipDisplay = $("#shipDisplay");
  var counter = $shipDisplay.data("counter");
  if(counter++ < 4) {
    $(this).css("background-color", "red");  
    $shipDisplay.data("counter", counter);
  }

}
function placeShips() {
    $("td").click(placeBattleship);
}
$(document).ready(function(){
  placeShips();
});

我使用 id 为 shipDisplay 的 div 来存储数据属性以计算点击次数。

看小哥：http://plnkr.co/edit/PEba15PSLv2LK6qjY7AD?p=preview

【讨论】：

谢谢。我终于让它工作了。我从来没有使用过 jQuery，所以这对我来说是新的。
这对一艘船很有用，但是我如何操纵它让我放置一艘船，然后是下一艘，然后是下一艘，然后是下一艘，一次一艘。我尝试添加更多功能，但它破坏了它。有任何想法吗？我不太了解 jQuery...
将你的逻辑添加到地方Battleship..里面的代码只是把正方形涂成红色。
如果你投票支持我的答案，我将不胜感激。谢谢
我做了...我的选票还没有计算在内。名声太低了。

【解决方案3】：

当计数器达到 4 时，您应该将逻辑中的优先级和 removeEventListener 分开，希望这对您有所帮助：

//defined outside the function
var counter = 0;
playerCells.addEventListener("click" , placeShips );

然后

 function placeShips() {
    if(counter <= 4){
      //Move ship
      placeBattleship();

//add to counter

       counter++

}else{

//Remove click event if counter reaches 4 .

playerCells.removeEventListener("click" , doSomethingElse)

}

}

【讨论】：

我应该用什么来代替 doSomethingElse？
doSomethingElse 只是另一个功能，例如：您可以重置游戏，提醒用户等...

【解决方案4】：

您的问题需要澄清一下。据我目前的理解，您需要将count的检查移至placeBattleship。

您所做的是将click绑定到相同的tds 4次，而不是将事件触发次数限制为4次。

// pseudo code
var count = 4; // this is global
var currentCount = 0;

initFunc() {
  // bind click events ONCE
}

startPlacing() {
  // accept user click and place ship
  // set currentCount to zero
}

placeShip() {
  // the callback of user `click`
  // check for currentCount == count then move on (no more placement)
  // increase currentCount by 1
  // place ship
}

注意，事件触发后，监听器不会被移除。直到你 removeEventListener() 从它那里，它会一直在听。

【讨论】：