带有 Onclick 分配的 For 循环中的闭包答案

【问题标题】：Closures in For Loops With Onclick Assignment带有 Onclick 分配的 For 循环中的闭包
【发布时间】：2017-01-30 12:24:09
【问题描述】：

我正在尝试通过循环“页面”对象数组来自动生成一个导航栏。不幸的是，我似乎陷入了循环/关闭陷阱。我已经阅读了与此相关的几个线程，并且在某些情况下复制并粘贴了解决方案代码并传入了我自己的变量，但我正在努力使其正确分配 onclicks。

我知道我很接近。在下面的代码中是我尝试过的两个选项。

自调用函数中括号中的参数是否有问题？ - ()(divId)？我真的不明白这部分。

我是否也会因为这是作为对象方法完成的而苦苦挣扎？

非常感谢任何帮助，但请放轻松，我在业余时间学习所有这些！ ;)

提前致谢。

编辑：Jsfiddle：https://jsfiddle.net/mcgettrm/fs0mtz6n/

var navBar = {
display: function(){
    for(i=0;i<pages.length;i++){
        document.getElementById('navBar').innerHTML += pages[i].token;
        var divId = pages[i].unique;

// code works fine up to here.
// option one(below): when navBar.display() is called the following code only adds
// the onclick to the final navbar link

        document.getElementById(divId).onclick=(function(divId) { 
                return function() { 
                alert(divId);
            }; 
        })(divId);

//option two(below): when navBar.display() is called the following code logs 
// the individual div id's correctly. But, it does it without being clicked. Then, 
// only the last item in the loop is clickable.

        (function(divId){
                document.getElementById(divId).onclick= function(){
                    console.log(divId);
                }
            }
        )(divId);
    }
}

};

【问题讨论】：

有趣的问题，我尝试了各种 IIFE 变体，每次只有最后一个元素被分配 onclick 处理程序。
非常感谢您的评论 - 我花了几个小时来解决这个问题。知道这不仅仅是我，这实际上真的很有帮助。有时，当您涉足新领域时，可能很难知道您是不是很傻！

标签： javascript loops onclick closures

【解决方案1】：

我已经在这里工作了 - https://jsfiddle.net/pqu9kr85/ 它似乎与 i 的绑定无关，您需要先构建导航 html，确保它在 DOM 中在绑定事件之前。我放置了两个单独的循环，一个用于生成导航，第二个用于绑定事件。还更新了page.display() 以使用this，因为这将受到i 值的影响。

【讨论】：