檢索索引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

您正在將事件偵聽器添加到列表的click事件上的每個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);
}

然后，在代碼加載時，它將為列表中的每個項目設置click事件。

更新：此javascript應該在創建列表后運行。