Question

我正在尝试通过循环遍历“Page”对象数组自动生成的navBar。不幸的是，我似乎陷入了循环/闭合陷阱。我已经阅读了几个与此相关的线程，并且在某些情况下有复制和粘贴的解决方案代码并传入我自己的变量，但我正在努力使其正确分配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);
    }
}

};

Answer 1

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

使用Onclick分配进行循环的闭包

1 个答案: