For循环结合addeventlistener不起作用(输出相同)

Question

我在我的html中添加点击事件到li标签。我附加到它的刷新函数运行良好，就像添加事件一样。虽然事件都是一样的……

HTML:

<li class="folder" id="css">css</li>
<li class="folder" id="images">images</li>
<li class="folder" id="js">js</li>

JS:

function addEvent(){
    var dirLinks = document.getElementsByClassName('folder');
    for(i=0; i< dirLinks.length; i++) {
        var tarDir = dirLinks[i].id;
        alert(tarDir);
        dirLinks[i].addEventListener('click', function(){refresh('file_manager', 'file-manager.php?tarDir='+tarDir);}, false);
    }
}

我希望每个li标签点击到一个等于它的ID的dir。但是所有的事件让我点击到最后发现的id. (JS)，而警报显示三个不同的id..(css, images &js)

我在这里做错了什么?看不懂

Answer 1

问题是您在闭包中引用tarDir，因此当您连接它时，您将获得分配给它的最后一个值(在最后一次循环迭代中分配的值)。参见JavaScript闭包是如何工作的?有关闭包工作原理的深入解释。

要解决，您可以替换为:

dirLinks[i].addEventListener('click', function(){refresh('file_manager', 'file-manager.php?tarDir='+tarDir);}, false);

与这个:

dirLinks[i].addEventListener('click', function(){refresh('file_manager', 'file-manager.php?tarDir='+this.id);}, false);

这行得通，因为当闭包被求值时，this指向dirLinks[i]

这是一个工作示例(我用alert替换了对refresh的调用，只是为了表明它有效):http://jsfiddle.net/fFe8U/1/