检索索引 ul li a 列表
Retrieve the index ul li a list
我有一个列表,单击该列表后会显示其索引。我遇到的问题是,我第一次点击时,它并没有完整地执行操作。我必须重新单击它,然后一切正常。但我找不到问题所在。你能告诉我哪里出错了吗?
这是我的清单:
<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);
}
});
您正在为每个 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 应该 运行 在 创建列表之后。
我有一个列表,单击该列表后会显示其索引。我遇到的问题是,我第一次点击时,它并没有完整地执行操作。我必须重新单击它,然后一切正常。但我找不到问题所在。你能告诉我哪里出错了吗?
这是我的清单:
<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);
}
});
您正在为每个 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 应该 运行 在 创建列表之后。