JavaScript循环绑定点击事件仅触发对应子元素image-overlay显示问题

错误原因 #

• 核心逻辑错误：点击事件触发后，你遍历了页面内所有image-overlay元素统一设置为显示状态，自然会出现所有容器的遮罩同时展示的问题。
• 不需要额外使用child nodes相关功能，直接基于当前点击的容器查找内部对应元素即可实现需求。

修复代码 #

const containerItems = document.getElementsByClassName("square-box-container");
for (let i = 0; i < containerItems.length; i++) {
  containerItems[i].onclick = function (e) {
    // 获取当前被点击的容器
    const currentContainer = e.currentTarget;
    // 仅查找当前容器内的遮罩元素修改状态
    const currentOverlay = currentContainer.querySelector(".image-overlay");
    currentOverlay.style.display = "block";
    // 若需要点击切换显示/隐藏，可替换为以下逻辑
    // currentOverlay.style.display = currentOverlay.style.display === "block" ? "none" : "block";
  };
}

代码说明 #

querySelector方法会在调用它的元素的后代节点中，查找匹配传入选择器的第一个元素，刚好匹配你仅修改当前容器内遮罩的需求，比手动遍历子节点更简洁高效。

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