使用JavaScript切换元素类名异常问题求助

问题根源 #

1. 选择器范围错误：你用document.querySelectorAll(".open")选中了所有带.open类的元素，包括按钮本身和按钮里的<img>。点击图片时，event.target指向图片，导致后续的层级查找完全偏离目标。
2. 硬编码层级计算错误：连续调用parentElement的方式既脆弱又出错——你要找的.specs-container是.blade元素的子节点，而你当前的代码最终定位到了.blade-list的子节点，自然找不到正确元素。

修复方案 #

方案1：精准绑定+可靠定位（推荐） #

只给按钮绑定事件，用closest()快速锁定最近的.blade父元素，再定位目标容器，这种方式不受DOM结构小改动影响：

// 仅选择button.open，排除内部的img.open
document.querySelectorAll("button.open").forEach((btn) => {
  btn.addEventListener("click", () => {
    // 找到当前按钮所属的.blade容器
    const blade = btn.closest(".blade");
    // 切换容器内specs的hidden类
    blade.querySelector(".specs-container").classList.toggle("hidden");
  });
});

方案2：修正事件目标指向 #

如果不想修改选择器，用event.currentTarget替代event.target——它永远指向绑定事件的元素，不会因为点击子元素而跑偏，再修正层级：

document.querySelectorAll(".open").forEach((item) => {
  item.addEventListener("click", (event) => {
    event.currentTarget
      .parentElement // 指向.buttons
      .parentElement // 指向.title
      .parentElement // 指向.blade
      .children[1] // 指向.specs-container
      .classList.toggle("hidden");
  });
});

额外优化点 #

• 改掉重复的id：你的按钮和内部img用了同一个id="open1"，违反HTML规范，每个元素的id必须唯一。
• 利用id直接定位：可以通过按钮id关联容器id，定位更高效：

  btn.addEventListener("click", () => {
    const containerId = `specs-container-${btn.id.replace("open", "")}`;
    document.getElementById(containerId).classList.toggle("hidden");
  });
  

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