如何为同class元素集合添加点击事件仅触发当前点击项

嘿，你的代码里有两个关键问题导致没达到预期效果，我来给你理清楚：

• document.getElementsByClassName("overlay")返回的是HTMLCollection（类数组集合），不是单个DOM元素，所以你不能直接给这个集合绑定点击事件。
• 不存在addClassName()这个方法，正确操作DOM元素类名的方式是使用classList API。

下面给你两种可行的实现方案，你可以根据场景选择：

方案1：遍历所有overlay元素，逐个绑定事件 #

这种方法适合页面上的overlay元素是静态的（不会动态添加/删除）：

// 获取所有class为overlay的元素集合
const overlays = document.getElementsByClassName("overlay");

// 遍历集合，给每个元素单独绑定点击事件
for (const overlay of overlays) {
  overlay.addEventListener("click", function() {
    // this指向当前被点击的那个overlay元素
    this.classList.add("hide");
  });
}

方案2：事件委托（更高效，支持动态元素） #

如果你的页面后续会动态添加新的overlay元素，用事件委托会更合适——只需要在父元素上绑定一次事件，就能处理所有子元素的点击：

// 选择一个合适的父容器（比如所有overlay的共同父元素，这里用body做示例）
document.body.addEventListener("click", function(e) {
  // 判断点击的目标元素是否是overlay类
  if (e.target.classList.contains("overlay")) {
    // 给点击的元素添加hide类
    e.target.classList.add("hide");
  }
});

两种方法都能实现你要的「点击哪个overlay，就只给那个元素加hide类」的效果~

内容的提问来源于stack exchange，提问作者swirdlerr