出于某种原因,我需要循环遍历各种元素并在单击它们时更改它们的样式。这是我正在尝试的代码(https://jsfiddle.net/wd4z1kvs/1/):
var myscroll = {};
myscroll.list = document.getElementsByClassName("navbar-right")[0].getElementsByTagName("li");
for( var j=0; j < 5; j++) {
myscroll.list[j].anchor = document.getElementsByClassName("navbar-right")[0].getElementsByTagName("li")[j].getElementsByTagName("a")[0];
myscroll.list[j].anchor.addEventListener("click", function() {
alert(j);
myscroll.list[1].anchor.innerHTML = "hello" + j;
myscroll.list[j].anchor.innerHTML = "yellow" + j;
});
}
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#artists">Artists</a></li>
<li><a href="#songs">Songs</a></li>
<li><a href="#beats">Beats</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
问题似乎在于该事件适用于 j
的当前值。当代码实际运行时,它不会获取参数的值。
最佳答案
最简单的解决方案是使用 forEach
,或其他一些循环回调函数:
myscroll.list.forEach(function(item, j) {
item.anchor = document.getElementsByClassName("navbar-right")[0]
.getElementsByTagName("li")[j]
.getElementsByTagName("a")[0];
item.anchor.addEventListener("click", function() {
alert(j);
myscroll.list[1].anchor.innerHTML = "hello" + j;
item.anchor.innerHTML = "yellow" + j;
});
});
关于javascript - 如何在for循环中添加事件监听器?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37292323/