js在for循环里添加事件后获取i

 1 <ul>
 2             <li index="1">1</li>
 3             <li index="2">1</li>
 4             <li index="3">1</li>
 5             <li index="4">2</li>
 6             <li index="5">3</li>
 7             <li index="6">4</li>
 8             <li index="7">5</li>
 9             <li index="8">6</li>
10             <li index="9">7</li>
11         </ul>
var li=document.querySelectorAll("li");
for(var i=0;i<li.length;i++){   li[i].onclick=function(a){   alert(li[i].getAttribute("index")) }
执行以上js代码会报错
但是把点击事件里的换成this就不会报错了,如下:
var li=document.querySelectorAll("li");
for(var i=0;i<li.length;i++){   li[i].onclick=function(a){   alert(this.getAttribute("index")) }
但是你如果一定要用i的话,可以考虑用以下代码,
var li=document.querySelectorAll("li");  
for(var i=0;i<li.length;i++){ li[i].onclick=function(a){ return function(){ alert(a) } }(i) }

其实你写一个for循环,里面点击事件想打印i都会有问题,比如:

var li=document.querySelectorAll("li");
  for(var i = 0; i < li.length; i++) {
  li[i].addEventListener("click",function () {
    console.log(i);
  })
}
这样写之后我们发现,点击任何一个li,打印的值都为9,这是因为闭包中共用i值,而i的值由于执行for循环,都变为了5.
想用i的值 参考上面代码

  

猜你喜欢

转载自www.cnblogs.com/ekko0219/p/10082124.html