1

我正在尝试做一件看似微不足道的事情，但我无法弄清楚。我正在迭代该document.getElementByClassName方法找到的项目。我正在使用索引这样做，所以我可以跟踪一些东西，并且我需要在onmousedown该特定元素的事件中使用该索引，但是我不知道这样做。

var items = document.getElementsByClassName("someClass");

    for (var i = items.length - 1; i >= 0; i--)
    {
        items[i].onmousedown=function(){
            //This does not work:
            var index = i; //I need the i variable from the loop above in here.
            console.log(index);
            this.innerHTML = doSomeWorkWith(index);
        };  

    }

有人知道怎么做吗？我曾考虑将它添加到元素本身，以便我可以在那里访问一个变量，但我不希望这样做，因为它会使 html 代码混乱。

4

3 回答 3

2

您需要保持索引关闭，例如

for (var i = items.length - 1; i >= 0; i--){
    (function(index){
        ...do anithing
    })(i); 
}
于 2013-11-13T20:02:40.280 回答
1

您需要使用另一个函数动态创建处理函数。这可以使用立即调用的函数表达式 (IIFE) 轻松完成。这样，您将i在定义处理程序时得到评估，而不是在执行它时。

var items = document.getElementsByClassName("someClass");
for (var i = items.length - 1; i >= 0; i--) {
    items[i].onmousedown = (function (index) {
        return function () {
            console.log(index);
            this.innerHTML = doSomeWorkWith(index);
        }
    })(i);
}

基本上，我不是直接将函数分配给onmousedown，而是动态创建一个具有i硬编码值的函数。
为了创建那个处理函数，我使用了另一个函数，我在定义它之后立即（就地）调用它，而无需指定名称。（当然我可以在全局范围内创建该函数并在这里使用它，但由于我在其他任何地方都不需要它，我为什么要这样做？）

[编辑]：要在该函数中使用事件，请使用

var items = document.getElementsByClassName("someClass");
for (var i = items.length - 1; i >= 0; i--) {
    items[i].onmousedown = (function (index) {
        return function (event) {
            this.innerHTML = doSomeWorkWith(index);
            // do something with "event" here
        }
    })(i);
}
于 2013-11-13T20:08:15.167 回答
0

这是一个经典问题，匿名函数捕获的是变量而不是它的值，所以当它确实被调用时，当前值是不正确的。

有关更多信息，请参阅此链接：JavaScript 匿名函数的参数

于 2013-11-13T20:02:56.487 回答