Question

我正在尝试做一件看似微不足道的事情，但我无法弄清楚这一点。我正在迭代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代码。

Answer 1

您需要将索引保持在关闭状态，例如

for (var i = items.length - 1; i >= 0; i--){
    (function(index){
        ...do anithing
    })(i); 
}

Answer 2

您需要使用其他功能即时创建处理函数。这可以使用立即调用的函数表达式（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);
}

Answer 3

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

有关详细信息，请参阅此链接：Arguments to JavaScript Anonymous Function

将迭代器索引获取到onmousedown函数中

3 个答案: