Question

我正在尝试将玩家添加到一个对象数组中，然后在div中显示他们的名字。这是我的情况：

搜索有关stackoverflow的问题，其中一个解决方案是使用这样的闭包：

for (var i = 0; i < numOfPlayers; i++) {
    (function(index) {
....click event...
    })(i);
}

但是当我按下提交时，每次我看到与输出相同的名称，加上它下面的奇怪差距。

Answer 1

请参阅 fixed fiddle here 。但是，如果我能理解为什么你有循环那么我会更好地帮助你？

$("#submit").click(
    function() {
        name = $("input[name='name']").val();
        money = $("input[name='money']").val();

        players.push(new Player(name, money, 0, 0, 0));
        $("input[name='name']").val("");
        $("input[name='money']").val("");

        $("#log").append(players[index++].name + "<br>");

        if(index == numOfPlayers) {
            $('#submit').prop('disabled', true);
        }
  });

为什么奇怪的空白区域？

循环导致您多次打印<br>而不是一次。您重新设置了5个单击事件处理程序而不是仅仅一个处理程序，并且每次单击该按钮时都会调用所有5个处理程序。

取代循环，只需注册一次点击事件就足够了，当索引达到所需的玩家数量时，提交按钮被禁用，因此用户将无法添加超过5个玩家：

if(index == numOfPlayers) {
    $('#submit').prop('disabled', true);
}

为什么总是第一个玩家被打印？

你没有增加index变量，这就是为什么你总是打印相同的 - 第一个玩家。现在，每次点击都会增加索引（请注意index++）：

$("#log").append(players[index++].name + "<br>");

Answer 2

你为什么要循环？现在你要添加5次点击处理程序，这就解释了为什么有一些空白空间。你的每一次都会执行你的功能，如果你看看你的玩家阵列，你会发现每次点击它都会得到5个空名的新玩家。

你想在点击发生时添加它们，这样的事情应该有效：

  function Player(name, money, bet, tmp, diceSum) {
      this.name = name;
      this.money = money;
      this.bet = bet;
      this.tmp = tmp;
      this.diceSum = diceSum;
  }

  var players = [];
  var name, money;
  var numOfPlayers = 5;

  $("#submit").click(
    function() {
      name = $("input[name='name']").val();
      money = $("input[name='money']").val();

      var newPlayer = new Player(name, money, 0, 0, 0);          
      players.push(newPlayer);

      $("#log").append(newPlayer.name + "<br>");

      $("input[name='name']").val("");
      $("input[name='money']").val("");

    });

Answer 3

https://jsfiddle.net/hzt0w3yx/17/

只需使用目标数组的length属性即可。此代码将打印最后一个播放器的名称（不需要循环）：

$("#log").append(players[players.length - 1].name + "<br>");

Answer 4

希望我理解您尝试在此处使用循环的原因。您应该在打印日志中循环，而不是在向播放器阵列添加新播放器时循环。此外，您还应在循环结束时添加0

单击for循环中的事件

4 个答案: