在for循環中點擊事件

Question

我想將玩家添加到對象數組中，然後在div中顯示他們的名字。這是我的情況：

https://jsfiddle.net/hzt0w3yx/14/

通過對計算器的解決方案之一是用這樣的封閉問題搜索：

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/

只需使用你的目標數組的長度屬性。這段代碼打印最後一名選手的域名（無需環路）：

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

Answer 4

希望我明白你想在這裏使用循環的原因。 您應該在打印日誌中循環，而不是在將新玩家添加到玩家陣列時循環。 此外，你應該在你的循環的末尾添加index++;太

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(); 
     players.push(new Player(name, money, 0, 0, 0)); 
     $("input[name='name']").val(""); 
     $("input[name='money']").val(""); 
     for(var i = 0; i< numOfPlayers; i++) { 
     (function(index){ 
      $("#log").append(players[index].name + "<br>"); 
      index++; 
     })(i); 
     } 
    } 
);