如何在幾個按鈕的循環中使用onclick？

Question

我有6個按鈕，都具有「測試」類。 我希望所有的人，以顯示他們的人數，1和6

之間我的代碼是：

for (n=0 ; n < document.getElementsByClassName("test").length ; n++) { 
    document.getElementsByClassName("test")[n].onclick = function() { console.log(n); }; 
} 

但我的console.log只顯示「6」。 我能做什麼（儘可能使用最短的代碼）？

Answer 1

您可以使用for循環

for (n = 0; n < document.getElementsByClassName("test").length; n++) { 
 
    (function(i) { 
 
    document.getElementsByClassName("test")[i].onclick = function() { 
 
     console.log(i); 
 
    }; 
 
    }(n)) 
 
}

<div class="test">click</div> 
 
<div class="test">click</div>

的內部封閉你可以選擇使用Array.from()，Array.prototype.forEach()

Array.from(document.getElementsByClassName("test")) 
 
.forEach(function(el, i) { 
 
    el.onclick = function() { 
 
    console.log(i) 
 
    } 
 
})

<div class="test">click</div> 
 
<div class="test">click</div>