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相同的目录。但所有的事件让我点击进入最后找到的ID ..（JS）虽然警报显示三个不同的ID ..（css，images＆amp; js）

我在这里做错了什么？无法弄清楚。

Answer 1

问题是你在一个闭包中引用tarDir，所以当你连接它时，你得到最后一个赋值给它的值（在最后一个循环迭代中赋值的值）。有关闭包如何工作的详细解释，请参阅How do JavaScript closures work?。

要解决，您可以替换它：

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]

这是一个有效的示例（我已将refresh的调用替换为alert仅显示其有效）：http://jsfiddle.net/fFe8U/1/

for循环结合addeventlistener不工作（相同输出）

1 个答案: