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

试试这个：

＆＃13;

<span id="What's_Next"></span>
<h4 class="editable">What's Next2</h4>

＆＃13;

var myscroll = {};

myscroll.list = document.getElementsByClassName("navbar-right")[0].getElementsByTagName("li");

for( var j=0; j < 5; j++) {

  (function(j) {
  
    /* j variable is just a local copy of the j variable from your loop */

    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;  
	});
    
  }(j));
  

  
  
}

＆＃13;

注意到@Andreas在循环中有一个闭包。

事件不记得价值观，他们只保留一个链接（参考）他们被创造的环境。在这种情况下，变量j 碰巧生活在三个事件所在的环境中定义。因此，所有事件，当他们需要访问该值时，达到回到环境中并找到j的最新值。后循环中，j变量的值为5.因此，所有五个事件都指向相同的价值。

Answer 2

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

Answer 3

使用这个： var myscroll = {};

var list = document.getElementsByClassName("navbar-right")[0].getElementsByTagName("li");
myscroll.list = list;

for (var j = 0; j < 5; j++) {
    var anchor = list[j].getElementsByTagName("a")[0];
    anchor.setAttribute("index",j);
    myscroll.list[j].anchor = anchor;
    anchor.addEventListener("click", function () {
        alert(this.getAttribute("index"));
        this.innerHTML = "hello" + this.getAttribute("index");
        //this.innerHTML = "yellow" + this.getAttribute("index");
        this.style.backgroundColor = "yellow";

    });
}

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

3 个答案: