javascript - HTML DOM - 新元素采用错误的值？

Question

我希望能够使用 javascript 一次创建许多新元素，并为每个元素提供一个 onmousedown() 函数。但我想要传递的变量最终会被用于每个元素。我已经设置了一个 jsfiddle 来显示问题所在:

http://jsfiddle.net/XzFbD/

for (var x = 0; x < 10; x++) 
{
     var newDiv = document.createElement('div');
     newDiv.id = "newDiv" + x;
     newDiv.innerHTML = x;
     newDiv.onmouseover = function () {
          changeNumber(newDiv, x + 1);
     }

     var container = document.getElementById("myDiv");
     container.appendChild(newDiv);
}

function changeNumber(obj, newValue) {
     obj.innerHTML = newValue;
}

我想要的功能是每个悬停的数字都会将自己的数字增加 1。但是它们的所有功能都被覆盖并更改为全部使用最后一个元素及其数字。请问我该如何解决这个问题？

Answer 1

for 不包含 block 作用域。因此，浏览器实际上是在对您的代码执行此操作(提升):


var newDiv;
为了() { ... }


这意味着您的变量 newDiv 将在每个循环中使用和重写。当您将鼠标悬停时，它将使用最后设置的 newDiv，因为它们都是相同的变量。您需要使用函数将其包含到 block 作用域中。它也会更快。

for (var x = 0; x < 10; x++) 
{
loop(x);
}

var loop = function(x) {

 var newDiv = document.createElement('div');
 newDiv.id = "newDiv" + x;
 newDiv.innerHTML = x;
 newDiv.onmouseover = function () {
      changeNumber(newDiv, x + 1);
 }

 var container = document.getElementById("myDiv");
 container.appendChild(newDiv);
};

var changeNumber = function(obj, newValue) { ... }