js動態(tài)綁定事件,無法使用for循環(huán)中變量i的問題

?

小閆語錄：我一直在幻想，那些偉大的預(yù)言家都來自未來，那些暢銷小說家都是真實經(jīng)歷過...

?

每天不是在寫 bug，就是在解 bug 的路上~更多精彩文章請關(guān)注公眾號『Pythonnote』或者『全棧技術(shù)精選』

1.問題描述

在一個 for 循環(huán)中，我動態(tài)給一堆 a 標簽綁定 onclick 事件時，發(fā)現(xiàn)點擊事件不正確。如下代碼：

var?link?=?document.getElementsByClassName("link");
for?(var?i?=?0;?i???link[i].onclick?=?function()?{
????alert(i);
??};
}

我需要的是，點擊第一個鏈接，彈出 0，點擊第二個鏈接，彈出 1......以此類推。但是上述代碼點擊每一個鏈接總是彈出一個值，而且還是個不正常的值。之所以說它不正常，是因為上面我獲取到了 5 個標簽，正常下標應(yīng)該到 4 結(jié)束，但是總是彈出 5 ？？？？

答：那是因為事件函數(shù)是一個匿名函數(shù)，此函數(shù)會在 for 循環(huán)執(zhí)行之后調(diào)用。調(diào)用時，發(fā)現(xiàn)內(nèi)部沒有定義變量 i ，所以就去外面找一下，發(fā)現(xiàn)外層有，就取外層的值了，但是為什么是 5 呢？那是因為 for 循環(huán)的結(jié)束條件是 i 不滿足 i<5 ，那么結(jié)束后變量 i 的值就是 5，匿名函數(shù)到外層取值正好取到了它。更多精彩文章請關(guān)注公眾號『Pythonnote』或者『全棧技術(shù)精選』

2.解決方法

可以采用自定義屬性的方式：

var?link?=?document.getElementsByClassName("link");
for?(var?i?=?0;?i???link[i].index?=?i;
??link[i].onclick?=?function()?{
????alert(this.index);
??};
}
};
//微信公眾號：全棧技術(shù)精選

排版：小閆

圖片素材：小閆

文案：小閆

長按掃描下方二維碼即刻關(guān)注小閆