JS中使用for迴圈新增點選事件時，獲取i值及引數異常原因及解決辦法
阿新 • • 發佈：2019-01-23
遇見此問題,程式碼檢查了n次都沒毛病,但是卻出現下述問題, 坑了我好久,原來是這個原因,記錄避坑!
PS這是js的處理方法, 在jquery中直接用each遍歷元素繫結點選事件即可避免
$('#id').each(function(i){
$(this).click(function(){
alert(i);
});
});比如頁面上有一個ul，數個li，現在給li新增點選事件。
| 1 2 3 4 5 6 |
var li
= document.getElementsByTagName("li");
for(var i
= 0; i < li.length; i++) {li[i].addEventListener("click",function ()
{
console.log(i);
})
}
|
但是，這樣寫之後我們發現，點選任何一個li，列印的值都為5，這是因為閉包中共用i值，而i的值由於執行for迴圈，都變為了5
為了正常顯示i值，我們可以使用如下方法:
| 1 2 3 4 5 6 7 |
for (var i
= 0; i < lis.length; i++) {
(function(arg){
li[arg].onclick
= function(){
console.log(arg);};
})(i)
}
|
類似於這樣
| 1 2 3 4 5 6 7 8 9 10 11 12 |
var li
= document.getElementsByTagName("li");
for(var i
= 0; i < li.length; i++) {
getConsole(i);
}
function getConsole(i){
li[i].addEventListener("click", function()
{
console.log(i);
});
}
|