Question

我希望能够使用javascript一次创建许多新元素，并为每个元素提供一个onmousedown（）函数。但是我想要通过的变量最终被用于每个元素。我已经设置了一个jsfiddle来展示问题所在：

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

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

Answer 1

for不包含block scope。因此，浏览器实际上是对您的代码执行此操作（提升）：

var newDiv; for() { ... }

这意味着您的变量newDiv将在每个循环中被使用和重写。当您悬停时，它将使用最后一组newDiv，因为它是所有相同的变量。您需要使用block scope将其包含在function中。它也会更快。

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) { ... }

Answer 2

这就是

的方式

http://jsfiddle.net/XzFbD/4/

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

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

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

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

2 个答案: