javascript - 检索索引 ul li 列表

Question

我有一个列表，单击该列表后会给出其索引。我遇到的问题是，第一次单击时，它没有完整执行该操作。我必须重新单击它，然后一切正常。但我找不到问题所在。你能告诉我我错在哪里吗？

这是我的列表:

<ul id="filesList">
  <li>index 1</li>
  <li>index 2</li>
  <li>index 3</li>
</ul>

非常感谢您的帮助!

这是我的代码:

filesList.addEventListener('click', function(e) {
for (var i = 0, len = filesList.children.length; i < len; i++) {
    (function(index) {
        filesList.children[i].onclick = function() {
            console.log(files[index]);
            e.stopImmediatePropagation();
        }
    })(i);
  }
});

Answer 1

您正在将事件监听器添加到列表中单击事件上的每个 li。这意味着您必须单击列表一次才能设置每个项目单击的行为。

解决方案很简单，只需删除第一行和最后一行:

for (var i = 0, len = filesList.children.length; i < len; i++) {
    (function(index) {
        filesList.children[i].onclick = function() {
            console.log(files[index]);
            e.stopImmediatePropagation();
        }
    })(i);
}

然后，当代码加载时，它将为列表中的每个项目设置单击事件。

更新:此 JavaScript 应该在创建列表之后运行。