Javascript 将类添加到单击的div中，其中包含多个具有相同类的div

如果两个div都具有相同的类，如何获取单击的div。 例如：

<div class="box"></div>  <div class="box"></div>

当然，这只适用于具有Id的div，而不适用于多个div。

您可以在此处使用，如：

var boxes = document.querySelectorAll('.box');
Array.from(boxes).forEach(box => {
  box.addEventListener('click', function(e) {
    e.target.classList.toggle('clicked');
  });
});

使用jquery

$（'.box'）。单击（函数（）{
console.log（$（this.text（））；
})

onetwo

如果要使用

document.getElementById（）

则需要添加元素

id

属性：

<div id="box1" class="box">

---

这种方法的性能更好，因为它只创建一个事件处理程序，而不是每个元素创建一个处理程序。

如果您将eventListener附加到包含元素上，这里我刚刚使用了body，但是更具针对性的选择器可以提供更好的性能

然后可以检查单击的项目的类

下面的例子

document.body.addEventListener（“单击”，函数（evt）{
var el=evt.src元素；
if（el.classList.contains（“框”））
el.classList.toggle（“单击”）；
});
。单击{
背景颜色：黄色；
}
框1
不是盒子
框2
如果您想继续使用纯JavaScript而不使用任何附加库，我相信查询选择器应该可以帮助您（）

改进您的代码片段：

document.querySelectorAll("box").forEach( function (){
    this.addEventListener('click', function(event) {
        event.target.classList.toggle("clicked");
    });
});

请注意，除非另有规定，否则要求解决的问题不应依赖于
jQuery。
queryselectoral
没有
addEventListener
document.addEventListener('click', function (event) {
    if(event.target.classList.contains('box')) {
        event.target.classList.toggle('clicked');
    }
}

document.querySelectorAll("box").forEach( function (){
    this.addEventListener('click', function(event) {
        event.target.classList.toggle("clicked");
    });
});