1. 程式人生 > >js在for迴圈裡新增事件後獲取i

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的值 參考上面程式碼