检索索引ul li列表

时间:2015-03-12 18:18:02

标签: javascript jquery html javascript-events mouseevent

我有一个列表,点击后会给我一个索引。我遇到的问题是,我第一次点击时,它并没有完整地执行操作。我必须重新点击它,然后一切都很完美。但我找不到问题。你能告诉我在哪里弄错了吗?

这是我的清单:

<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);
  }
});

1 个答案:

答案 0 :(得分: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事件。

更新:应在创建列表后运行