javascript解決for迴圈中i取值的問題
阿新 • • 發佈:2019-02-19
最近在做專案時遇到呼叫for迴圈中i取值問題,主要程式碼如下:
function delete__listen() {
var detNum=document.getElementsByTagName('li');
for(var i = 0; i < detNum.length; i++){
detNum[i].onclick = function(){
alert(i);
delete__item(i);
}
}
}
function delete__item(k) {
data.splice(k,1 );
getNum(data);
}
發現問題:
此程式碼塊的主要目的是想每次點選對應目標時彈出對應的數字下標 0~n,但實際是無論點選哪個目標都會彈出數字n+1。
分析主要原因,發現+1的原因在於for迴圈中,當執行指標到達閉包閾值發現沒有觸發click事件,以此迴圈體迴圈完畢,i++,因此當click函式被觸發時看到alert彈出出現n+1的結果;內部閉包域引用外部閉包域的私有變數作為變數,當外部閉包域的私有變數內容發生變化,內部閉包域得到的值自然會發生改變。
解決方案:
為當前陣列項即當前li物件新增一個名為count的屬性,值為迴圈體的i變數的值,此時當前li物件的count屬性並不是對迴圈體的i變數的引用,而是一個獨立li物件的屬性,屬性值在宣告的時候就確定了。程式碼如下:
for(var i = 0; i < detNum.length; i++){
detNum[i].count=i; /*good*/
detNum[i].onclick = function(){
delete__item(this.count);
}
}