如何将 onclick 事件添加到具有相同类名的多个类？ [复制]答案

【问题标题】：How can I add an onclick event to more than one class with the same class name? [duplicate]如何将 onclick 事件添加到具有相同类名的多个类？ [复制]
【发布时间】：2018-06-20 08:52:18
【问题描述】：

我正在尝试为自己创建一个时间表网站来练习 CSS 网格和 Javascript，我希望能够选择“已完成？”时间表部分并将 div 的颜色更改为绿色。但是，我没有运气.. 到目前为止我的代码是：

document.getElementsByClassName('tick').onclick = changeBgColor;
function changeBgColor() {
  document.getElementsByClassName('tick').style.backgroundColor = "green";
}

<div class="item tick complete1"></div>
<div class="item tick complete2"></div>
<div class="item tick complete3"></div>
<div class="item tick complete4"></div>
<div class="item tick complete5"></div>
<div class="item tick complete6"></div>
<div class="item tick complete7"></div>

任何帮助将不胜感激！

【问题讨论】：

querySelectorAll 加上forEach?在容器上放置一个侦听器并使用事件委托？普通的for 循环？

标签： javascript onclick dom-events

【解决方案1】：

您需要遍历所有元素以添加click 事件侦听器。还可以使用this.style.background = "green"; 更改background 函数内部的background 颜色。

var elem = document.getElementsByClassName('tick');
for(var i=0; i<elem.length; i++){
  elem[i].addEventListener('click', changeBgColor);
}

function changeBgColor() {
 this.style.background = "green";
}

 <div class="item tick complete1">1</div>
 <div class="item tick complete2">2</div>
 <div class="item tick complete3">3</div>
 <div class="item tick complete4">4</div>
 <div class="item tick complete5">5</div>
 <div class="item tick complete6">6</div>
 <div class="item tick complete7">7</div>

【讨论】：

【解决方案2】：

document.getElementsByClassName返回一个集合。使用spread operator转换后循环这个集合。使用forEach循环这个数组并使用addEventListener添加点击事件

[...document.getElementsByClassName('tick')].forEach(function(item) {
  item.addEventListener('click', changeBgColor)
})


function changeBgColor() {
  this.style.backgroundColor = "green";
}

<div class="item tick complete1">1</div>
<div class="item tick complete2">2</div>
<div class="item tick complete3">3</div>
<div class="item tick complete4">4</div>
<div class="item tick complete5">5</div>
<div class="item tick complete6">6</div>
<div class="item tick complete7">7</div>

【讨论】：

做到了！谢谢！