for循环中的最后一项在Javascript中执行多次

Question

我正在制作一个 JavaScript/jQuery 版本的骰子游戏，我和我的朋友们一起玩。这是游戏的 3 人版本：

http://codepen.io/jwnardini/pen/jmygqd

我正在尝试制作一个用户可以选择正在玩多少玩家的游戏版本，并以相同的方式拥有游戏功能：

http://codepen.io/jwnardini/pen/ZKLVqW

每次按下“开始”按钮时，它都应该轮到下一个人，我在 for 循环中使用模块化运算符 if 条件来检查轮到谁了，所以我可以执行特定操作轮到他们了。

var turn = 0;

$(".goButton").click(function() {
  turn = turn + 1;
  var playerCount = $('#input-number').val();  

  for (i=1;i <= playerCount;i++){
    if (turn % playerCount == i) {
    $(".player" + i + "dollars").append("Hi!");
    }
  }
});

这对我创建的每个玩家都非常有效，除了最后一个 (player# playerCount)。这是因为 playerCount % playerCount = 0，而 i 永远不会是 0，所以总是跳过最后一个玩家。

我试图用 else 语句来解决这个问题，当 turn % playerCount = 0 时：

var turn = 0;

$(".goButton").click(function() {
  turn = turn + 1;
  var playerCount = $('#input-number').val();  

  for (i=1;i <= playerCount;i++){
    if (turn % playerCount == i) {
    $(".player" + i + "dollars").append("Hi!");
    } else if (turn % playerCount == 0) {
    $(".player" + playerCount + "dollars").append("Hi!");
    }
  }
});

但是，当我轮到 player# playerCount 时，我得到 playerCount 次“嗨！”附加。例如，对于 5 个玩家，这是浏览器中的输出：

Player 1
$3Hi!

Player 2
$3Hi!

Player 3
$3Hi!

Player 4
$3Hi!

Player 5
$3Hi!Hi!Hi!Hi!Hi!

这对我来说是典型的“off by 1”错误吗？还是我的 else 语句在某些方面存在缺陷？

Answer 1

问题在于您的循环，当您遍历 playerCount 并尝试获取要附加到的类名时。

尝试执行以下操作，而不是整个循环：

var m = turn % playerCount;
if (m==0) {m = playerCount};
$(".player" + m + "dollars").append("Hi!");

Answer 2

取出循环外的第 4 个玩家条件。问题是当turn ==playercount 时，您不必进入循环，因为该条件独立于i 并且将始终为真，因此得到执行时间。

for (var i=1;i <= playerCount;i++){
if (turn % playerCount == i) {

  $(".player" + i + "dollars").append("Hi!");
}
}
    if (turn % playerCount == 0) {
   $(".player" + playerCount + "dollars").append("Hi!");
 } 

这里是代码工作代码 sn-p ：

var turn = 0;
var pot = 0;

  $("form").submit(function(event){
    var i = 0
    var playerCount = $('#input-number').val();
    var dollarCounts = [];
    $(".players").empty();
    for (var i=1; i <= playerCount; i++) {
      var player= "player";
      player = player + i.toString();
      $(".players").append(
        '<div class="player-wrap"><div class="player' + i.toString() + ' clearable">Player '
        + i + 
        '</div>$<span class="' + player + 'dollars clearable"></span><br><br><br></div>');
      dollarCounts[i] = 3;
      $("." + player + "dollars").empty().append(dollarCounts[i]);
    }
    event.preventDefault();
  });


//TURN
$(".goButton").click(function() {
  
  turn = turn + 1;
  var dice1 = Math.floor(Math.random() * 6) + 1;
  var dice2 = Math.floor(Math.random() * 6) + 1;
  var dice3 = Math.floor(Math.random() * 6) + 1;
  $(".turn").empty().append(turn);

  
  //Print "Left", "Right", "Center"
  if (dice1 == 1) {
    $(".d1").empty().append("LEFT");
  }
  if (dice2 == 1) {
    $(".d2").empty().append("LEFT");
  }
  if (dice3 == 1) {
    $(".d3").empty().append("LEFT");
  }
  if (dice1 == 2) {
    $(".d1").empty().append("RIGHT");
  }
  if (dice2 == 2) {
    $(".d2").empty().append("RIGHT");
  }
  if (dice3 == 2) {
    $(".d3").empty().append("RIGHT");
  }
  if (dice1 == 3) {
    $(".d1").empty().append("CENTER");
  }
  if (dice2 == 3) {
    $(".d2").empty().append("CENTER");
  }
  if (dice3 == 3) {
    $(".d3").empty().append("CENTER");
  }
  if (dice1 == 4 || dice1 == 5 || dice1 == 6) {
    $(".d1").empty().append("SAFE");
  }
  if (dice2 == 4 || dice2 == 5 || dice2 == 6) {
    $(".d2").empty().append("SAFE");
  }
  if (dice3 == 4 || dice3 == 5 || dice3 == 6) {
    $(".d3").empty().append("SAFE");
  }
  var playerCount = $('#input-number').val();  
  
  for (var i=1;i < playerCount;i++){
  
    if (turn % playerCount == i) {
    
      $(".player" + i + "dollars").append("Hi!");
    }
  }
  if (turn % i == 0) {
      $(".player" + playerCount + "dollars").append("Hi!");
    }  
});

//RESET
$(".resetButton").click(function() {
  turn = 0;
  pot = 0;
  $(".players").empty();
  var playerCount = 0;
  var dollarCounts = [];
  $(".turn").empty().append(turn);
  $(".pot").empty().append(pot);
  $(".d1").empty();
  $(".d2").empty();
  $(".d3").empty();
});
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="start-form">
        <label for="input-number">Number of players:</label>
        <input id="input-number" type="number">
        <button type="submit" class="btn">Set Player Count</button>
      </form>

<button class="goButton" type="submit">Go</button>
<button class="resetButton" type="submit">Reset</button>
<br><br>
<div class="players"></div>
<h1>Turn count: <span class="turn"></span></h1>
<h2>Rolls: 
  <span class="d1"></span> 
  <span class="d2"></span> 
  <span class="d3"></span>
</h2>
<br>
<br>
<br>
<br>
<br>
<h1>POT</h1>
<div class="pot"></div>