讓用Javascript。混亂

Question

我真搞不清楚這個代碼

var box = document.getElementsByClassName('box-value'); 
 

 
for(let i = 0; i < box.length; i++){ 
 
    box[i].onclick = function(){ 
 
     console.log(i); 
 
    } 
 
    console.log("End loop. i:" + i); 
 
} 
 

 
let i = 0; 
 
box[i].onclick = function(){ 
 
    console.log(i); 
 
} 
 
i = 9; 
 

 
box[0].onclick();

在第一個塊，我是0

但在第二塊，我是9.

我真的不明白爲什麼？

Answer 1

因爲你的第一個i處於塊和doesn't get changed afterwards，而你的第二個i（不是塊），並運行單擊處理之前，不會獲取設置爲9。您可以通過執行

{ 
    let i = 0; // one variable that stays constant 
    box[i].onclick = function(){ 
     console.log(i); 
    }; 
} 
let i = 9; // a different variable 

模擬從循環的行爲，您還可以通過將範圍周圍的循環模擬分配的改變行爲：

let i = 0; 
for(; i < box.length; i++) { 
    box[i].onclick = function() { 
     console.log(i); 
    }; 
    console.log("End loop. i:" + i); 
} 

Answer 2

與在let申報i在循環結束後，for循環將不存在。第二i是獨立的，你設置的是9，這就是爲什麼第二i的值爲9

let statement documentation