Question

我有以下代码：

    // 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); 
    }

我试图在这个循环中为每个列表项提供一个处理点击事件的事件监听器。但是，出于某种原因，单击任何列表项会调用列表中 last 项的事件侦听器。

任何人都可以向我解释为什么会这样吗？

我将使用完全不同的语言来使用JavaScript，而我正在努力使用基于原型的类。

Answer 1

每个循环都会覆盖entry变量。避免这种情况的一种方法是：

for(j = 0; j < len; j++) {

    (function(entry){

       ....

    })(sortedArray[j])

}

此IIF（立即调用的函数）为每次迭代分别调整条目变量。

Answer 2

这是因为下面的行

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

与变量entry绑定，而不是其值。因此，在整个循环中分配或值的变化，最后一次迭代的值在条目变量中被保留，并且每个事件处理函数将访问该变量获取最后一个值。

解决方案：使用immediate function作为Kenney在此Q帖子中建议的内容，或者检查此answer它不那么模糊。

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

2 个答案: