Question

我正在尝试创建一个列表，以便在单击LI元素时显示特定的div。我想从字典中读取div和其他属性的id。所以，字典看起来像这样：

var ifSrc = {"welcome":"welcome.html",
          "proceduresAndComputers":"../proceduresAndComputers/index.html",
          "someId":"../someSourceFileForAnIFrame"}

和形成那些LI元素的函数

function createMenu(){
    var listy = document.getElementById("sidebar");
    for(var key in ifSrc){
        var elem = document.createElement('li');
        elem.innerHTML = key;
        elem.className = "unselected";
        elem.addEventListener("click",function(){openDiv(this,key);},false);
        listy.appendChild(elem);
    }
    listy.firstElementChild.className="selected";
}

因此，菜单（带有LI元素的UL）看起来没问题，但无论我点击哪个LI，openDiv函数都会传递this的正确值，但key的值相同。特别是，它传递key字典中ifSrc的最后一个值。但是，每个元素的innerHTML（设置为key）看起来很好。我检查了addEventListener的文档，我找不到多少。

为什么会这样？任何见解？

Answer 1

确保您正在捕获正确的键值（使用闭包，在下面的示例中）。现在的方式，key始终是对所有点击事件中相同值的引用。您可以通过执行以下操作为每个点击事件复制{em>当前值key：

    elem.addEventListener("click", (function(k) {
        return function() { 
            openDiv(this, k);
        }
    })(key), false);

Demo - jsfiddle.net

供参考 - 查看“臭名昭着的循环问题”为explained here。

JavaScript中的范围，闭包和绑定。为什么我的循环不能正常工作？

1 个答案: