Question

为什么以下代码在点击时不会打印出相应的值？

相反，它打印5？

var recipeDiv = document.createElement("div");
var recipeUL = document.createElement("ul");
for (var i = 0; i < 5; ++i) {
    var listNode = document.createElement("li");
    listNode.innerHTML = i;
    listNode.onclick = function() { alert(i); }
    recipeUL.appendChild(listNode);
}
recipeDiv.appendChild(recipeUL);
addNodeToDOM(document.body, recipeDiv, 'recipe');

function addNodeToDOM(element, node, id) {
    var div = document.createElement('div');
    div.id = id;
    div.appendChild(node);
    element.appendChild(div);
}

我能够在这里重现错误：jsfiddle

但基本上，我不确定这是否是正确地向DOM添加元素的约定。如果是这样，那么每当我点击列表元素时，它就不会显示

Answer 1

执行onclick处理程序时，i的值将始终显示5，因为for循环在第5次迭代时结束，

使用this.innerHTML，

listNode.onclick = function() { alert(this.innerHTML); }

<强> Updated Fiddle

Answer 2

另一个简单的解决方案是使用包装函数。

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

      var listNode = document.createElement("li");
      listNode.innerHTML = i;
      listNode.onclick = function() { alert(i); }
      recipeUL.appendChild(listNode);

    })(i);
}

这样，您始终可以依赖迭代器变量i。

Answer 3

这就是封闭概念发挥作用的地方。尝试使用以下代码修改listNode.onclick = function() { alert(i); }代码行：

listNode.onclick = (function(index) { return function(){alert(index);} })(i);

我已经更新了你的小提琴.. FIDDLE

单击添加到DOM的元素时无法获得正确的值

3 个答案: