如何修改JavaScript代码实现多元素的显示/隐藏交互？

问题根源 #

你使用document.querySelector()获取元素时，这个方法仅返回第一个匹配的DOM节点，所以只有第一个.box_icon和.title_box能绑定事件并响应交互，其余元素完全没被处理。

修改思路 #

1. 用document.querySelectorAll(".box_icon")获取所有图标元素，遍历每个元素绑定点击事件
2. 点击事件中，通过当前图标的父容器（.box_mini）定位对应的标题元素，确保每个图标只控制自身所在盒子的标题
3. 操作类名时改用classList.add()/classList.remove()，避免直接赋值覆盖掉基础样式类box_icon

修改后的JavaScript代码 #

// 获取所有图标元素
let icons = document.querySelectorAll(".box_icon");

// 遍历每个图标，绑定点击事件
icons.forEach(icon => {
  icon.addEventListener("click", function() {
    // 找到当前图标所在盒子里的标题元素
    let excerpt = this.parentElement.querySelector(".title_box");
    
    if (this.classList.contains("bi-play-circle-fill")) {
      this.classList.remove("bi-play-circle-fill");
      this.classList.add("bi-power");
      excerpt.style.display = "block";
    } else {
      this.classList.remove("bi-power");
      this.classList.add("bi-play-circle-fill");
      excerpt.style.display = "none";
    }
  });
});

完整可运行代码示例 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css" rel="stylesheet" />
<section class="box_main">
  <div class="box_mini">
    <i class="bi bi-play-circle-fill  box_icon"></i>
    <h1 class="title_box">Title BOX</h1>
  </div>
  <div class="box_mini">
    <i class="bi bi-play-circle-fill  box_icon"></i>
    <h1 class="title_box">Title BOX</h1>
  </div>

  <div class="box_mini">
    <i class="bi bi-play-circle-fill  box_icon"></i>
    <h1 class="title_box">Title BOX</h1>
  </div>

  <div class="box_mini">
    <i class="bi bi-play-circle-fill  box_icon"></i>
    <h1 class="title_box">Title BOX</h1>
  </div>

</section>

<style>
.box_main {
  display: flex;
  justify-content: space-around;
}

.box_mini {
  width: 250px;
  height: 200px;
  background: #5ec7ff;
  box-shadow: 0 0 4px #000;
}

.box_icon {
  font-size: 25px;
  margin: 10px 40% 6px;
  color: #7f7f7f;
}

.title_box {
  font-size: 45px;
  margin: 25px 15px 20px;
  color: #f9ff4d;
  display: none;
}
</style>

<script>
let icons = document.querySelectorAll(".box_icon");

icons.forEach(icon => {
  icon.addEventListener("click", function() {
    let excerpt = this.parentElement.querySelector(".title_box");
    
    if (this.classList.contains("bi-play-circle-fill")) {
      this.classList.remove("bi-play-circle-fill");
      this.classList.add("bi-power");
      excerpt.style.display = "block";
    } else {
      this.classList.remove("bi-power");
      this.classList.add("bi-play-circle-fill");
      excerpt.style.display = "none";
    }
  });
});
</script>

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