for迴圈裡的的相關索引值/閉包
阿新 • • 發佈:2018-11-13
一個小例子
直接使用for迴圈
for(var i=0; i< 6; i++){
console.log(i);
}
列印的結果為:1 2 3 4 5 6
但是結合到某一例項,或者建立相關DOM元素後
<div id="box"> <div>盒子1</div> <div>盒子2</div> <div>盒子3</div> <div>盒子4</div> </div> <script type="text/javascript"> var box=$("#box").find("div"); for(var i=0;i<box.length;i++){ box[i].on('click',function(){ console.log(i); }) } </script> 列印結果為:4
這是因為當click被呼叫的時候,for迴圈已經結束了,此時i的值為迴圈後的最終值:4
那麼怎麼解決這個問題呢?
第一種方式:通過index,新增“正確”的索引值
for(var i=0;i<box.length;i++){
box[i].index=i;//新增“正確”的索引值
box[i].on('click',function(){
console.log(i);
})
}
第二種方式:通過閉包
for(var i=0;i<box.length;i++){ (function(){ box[i].on('click',function(){ console.log(i); })(i) //閉包 }) }
()(i)
在javascript中,只有函式內部的子函式才能讀取區域性變數