如何在几个按钮的循环中使用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>