在onclick事件处理程序循环中设置当前元素 [英] Set current element in onclick event handler loop

问题描述

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

I'm looping over multiple elements, which I'd like to assign an onclick event handler too.

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

The problem is that the element sent to the goTo function (event handler), is always the last element in the loop. What am I doing wrong?

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

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

推荐答案

您应该添加一个闭包，就像这样：

You should add a closure, like this:

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 在每个循环周期中都是唯一的，因此不会被覆盖（这就是为什么它会保持先前代码中的最新值）

This way, the inner navLink will be unique per loop cycle, so it won't get overwritten (that's why it remained with the latest value in your previous code)

欢呼

这篇关于在onclick事件处理程序循环中设置当前元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！