添加单击侦听器以循环列出项目

Adding click listeners to list items in loop

本文关键字：项目 循环 单击 侦听器 添加      更新时间：2023-09-26

我有以下代码：

    // Iterate through each of the children
    for(j = 0; j < len; j++) {
        var entry = sortedArray[j];
        // Each entryLI is a child of nameOL <ol> element
        var entryLI = document.createElement("li"); 
        // Each entryLI should have a unique click listener
        entryLI.addEventListener("click", function(event) {entry.onListItemClick()});
        // Set the text of the <li> to the name of the entry
        var nameNode = document.createTextNode(entry.entryName);
        entryLI.appendChild(nameNode);
        // Append the entry list item to the ordered list
        nameOL.appendChild(entryLI); 
    }

我正在尝试在此循环中为每个列表项提供一个处理单击事件的事件侦听器。但是，由于某种原因，单击任何列表项将调用列表中最后一项的事件侦听器。

谁能向我解释为什么会这样？

我

从完全不同的语言来到JavaScript，我正在努力解决基于原型的类。

entry变量在每个循环中被覆盖。规避此问题的一种方法是：

for(j = 0; j < len; j++) {
    (function(entry){
       ....
    })(sortedArray[j])
}

此IIF(立即调用的函数(为每次迭代单独限定条目变量的范围。

这是因为以下行

entryLI.addEventListener("click", function(event) {entry.onListItemClick()});

绑定到变量 entry 而不是其值。因此，在整个循环中分配或更改的值，最后一次迭代的值都保存在入口变量中，并且每个事件处理程序函数都将访问该变量以获取最后一个值。

解决方案：按照 Kenney 在此 Q 线程中的建议使用即时函数，或者检查此答案，它不那么模棱两可。

相关文章：