在onclick事件處理程序循環中設置當前元素

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閉合-簡單的實際示例以獲取說明。

在事件處理程序內部，您可以通過this方式訪問元素本身（如果您使用addEventListener綁定處理程序，則也可以使用該方法）：

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

並假設goTo是一個函數，您可以將代碼縮短為

navLink.onclick = goTo;

在你的情況下。