循環nodelist中的所有元素時出現錯誤的變量

Question

我創建了一個選擇2個div的節點列表。然後我創建一個函數來顯示用戶點擊的div的索引。但輸出總是2.我不知道錯誤在哪裏。

這只是一個簡單的問題，但它會解決事件內部許多事件的其他複雜問題。謝謝。

HTML：

<div style="background:red; height:50px"></div> 
<div style="background:black; height:50px"></div> 

的Javascript：

var div = document.getElementsByTagName('div'); 

for (i = 0; i < div.length; i++) { 
    div[i].onclick = function() { 
     alert(i); 
    } 
} 

例子： https://jsfiddle.net/vutienphat/tm279uot/

Answer 1

試試這個：

在你的情況下，i價值也不過是價值i已經在循環是結束節點列表的length-1。

var div = document.getElementsByTagName('div'); 
 

 
for (i = 0; i < div.length; i++) { 
 
    div[i].onclick = (function(i) { 
 
    return function() { 
 
     alert(i); 
 
    } 
 
    })(i) 
 
}

<div style="background:red; height:50px"></div> 
 
<div style="background:black; height:50px"></div>

Fiddle here

Answer 2

輸出始終是2，因爲你是在提醒其已經在一次有人結束了遞增變量點擊。請看下面的代碼邏輯，而不是

function index(element) { 
 
    for (var i = 0; element = element.previousElementSibling; i++); 
 
    return i; 
 
} 
 

 
divs = document.getElementsByTagName('div'); 
 

 
for (i = 0; i < divs.length; i++) { 
 
    divs[i].onclick = function() { 
 
     alert(index(this)); 
 
    } 
 
}

<div style="background:red; height:50px"></div> 
 
<div style="background:black; height:50px"></div>