在事件處理程序中使用變量作爲常量

Question

爲什麼在本例中警報總是「您單擊按鈕5」？我怎樣才能讓n在事件處理程序中保持正確的值？

HTML：

<div id="container"></div> 

JS：

var container = document.getElementById("container"); 

for (var n = 0; n < 5; n++) { 

    var btn = document.createElement("button"); 
     btn.innerHTML = "Button " + n; 

    btn.onclick = function() { 
     alert("You clicked button " + n);   
    } 

    container.appendChild(btn); 

} 

我在這個例子中，我可以只使用類似this.innerHTML或N作爲它的值分配給該按鈕的屬性實現，但我對這樣做並不感興趣。

繼承人的小提琴：http://jsfiddle.net/WFNL2/1/

Answer 1

這裏的問題是，JavaScript並沒有對for循環中，只有函數創建一個範圍。

你可以用一個函數的循環，你立即撥打：

for (var n = 0; n < 5; n++) { 

    var btn = document.createElement("button"); 
     btn.innerHTML = "Button " + n; 

    btn.setAttribute('data-id', n); 

    btn.onclick = function() { 
     alert("You clicked button " + this.getAttribute('data-id'));   
    } 

    container.appendChild(btn); 
} 

：

for (var n = 0; n < 5; n++) { 
    (function(n){ 

     var btn = document.createElement("button"); 
      btn.innerHTML = "Button " + n; 

     btn.onclick = function() { 
      alert("You clicked button " + n);   
     } 

     container.appendChild(btn); 
    )(n); 
} 

您也可以與該元素的ID相關聯