Question

我正在遍历多个元素，我也想分配一个onclick事件处理程序。

问题是发送到goTo函数（事件处理程序）的元素始终是循环中的最后一个元素。我究竟做错了什么？

var navLinks = document.getElementsByClassName('navigation');

    for (var i = 0; i < navLinks.length; i++) {
        var navLink = navLinks[i];
        navLink.onclick = function() { goTo.call(navLink); }
    }

Answer 1

你应该添加一个闭包，如下所示：

var navLinks = document.getElementsByClassName('navigation');

for (var i = 0; i < navLinks.length; i++) {
    var navLink = navLinks[i];
    (function(navLink){   //This line does the magic
         navLink.onclick = function() { goTo.call(navLink); }  
    })(navLink);  //This calls the created function      
}

这样，内部navLink每个循环周期都是唯一的，所以它不会被覆盖（这就是为什么它保留在你之前代码中的最新值）

干杯

Answer 2

我做错了什么？

请参阅JavaScript closure inside loops – simple practical example以获取解释。

在事件处理程序中，您可以通过this访问元素本身（如果您使用addEventListener来绑定处理程序，这也适用）：

navLink.onclick = function() { goTo.call(this); }

假设goTo是一个函数，您可以将代码缩短为

navLink.onclick = goTo;

在你的情况下。

在onclick事件处理程序循环中设置当前元素

2 个答案: