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++) {
    (function(n){

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

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

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

您还可以将id与元素相关联：

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);
}

将变量用作常量内部事件处理程序

1 个答案: