javascript - 如何在 for 循环中添加事件监听器？

Question

出于某种原因，我需要遍历各种元素并在单击它们时更改它们的样式。这是我正在尝试的代码(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 的现值一起工作。在实际运行代码时，它不会获取参数的值。

Answer 1

最简单的解决方案是使用 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;
    });
});