我有一些像这样的div:
.test {
height: 50px;
width: 50px;
border-radius: 4px;
display: inline-block;
background-color: lightgreen;
margin: 5px;
line-height: 50px;
text-align: center;
}<div class="test" id="one">1</div>
<div class="test" id="two">2</div>
<div class="test" id="three">3</div>
<div class="test" id="four">4</div>
<div class="test" id="five">5</div>
<div class="test" id="six">6</div>
<div class="test" id="seven">7</div>它们的 (id) 不同，但我对它们应用了相同的类名， 所以，我现在可以像这样访问它们
var box = document.getElementsByClassName("clsname");
这创建了一个名为 box 的数组。 我想编写一个 JavaScript 函数来返回数组中被单击的元素。 例如，当我单击任意一个框时，该函数将被触发，并返回被单击的框(div)元素。
我想用纯 JS 来做，不要使用 jquery :)
谢谢
最佳答案
这是循环它们并添加事件监听器的简单方法:
var testList = document.getElementsByClassName("clsname");
for(var i = 0; i < testList.length; i++) {
testList[i].addEventListener('click', function() {
console.log(this.id);
});
}
这是一个JSBin上面有一个例子。
代码的作用是循环遍历 NodeList，然后在单击时添加一个事件监听器以记录其 ID。这是一个片段:
var testList = document.getElementsByClassName("test");
for(var i = 0; i < testList.length; i++) {
testList[i].addEventListener('click', function() {
console.log(this.id);
});
}.test {
height: 50px;
width: 50px;
border-radius: 4px;
display: inline-block;
background-color: lightgreen;
margin: 5px;
line-height: 50px;
text-align: center;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="one" class="test">1</div>
<div id="two" class="test">2</div>
<div id="three" class="test">3</div>
<div id="four" class="test">4</div>
<div id="five" class="test">5</div>
<div id="six" class="test">6</div>
<div id="seven" class="test">7</div>
</body>
</html>如果需要，您可以使用 Array 中的 forEach 循环，如下所示:
var testList = document.getElementsByClassName("clsname");
Array.prototype.forEach.call(testList, function(element, index) {
element.addEventListener('click', function() {
console.log(this.id);
});
});
关于JavaScript - 单击后如何从数组中获取元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39297818/