前端新手技术求助：如何添加条件为无.bigger类的图片对应的关闭按钮添加.invisible类

嘿，我来帮你搞定这个关闭按钮的显示逻辑问题！先看看你现有代码里的小问题：你最后写的那个if语句放在了两个循环外面，这时候i和x已经不是循环里的有效变量了，根本不会执行，而且逻辑也没关联到对应的图片和按钮上。

咱们可以从这几个方向调整，让逻辑更清晰健壮：

• 页面初始化时，所有关闭按钮默认隐藏（因为一开始没有图片是放大状态）
• 点击图片放大时，显示当前图片对应的关闭按钮，同时隐藏其他所有关闭按钮
• 点击关闭按钮时，移除当前图片的放大类，同时隐藏这个关闭按钮

另外，不用依赖索引来关联图片和按钮，咱们可以利用DOM的层级关系（按钮和图片在同一个.imgContainer容器里），这样代码更灵活，就算后续增减图片也不用改逻辑。

修改后的完整代码如下：

HTML（保持不变） #

<div class="imgContainer">
  <span>&times;</span>
  <img src="img1.jpg" alt="Tokyo1" />
</div>
<div class="imgContainer">
  <span>&times;</span>
  <img src="img2.jpg" alt="Tokyo2" />
</div>
<div class="imgContainer">
  <span>&times;</span>
  <img src="img3.jpg" alt="Tokyo3" />
</div>

CSS（保持不变） #

img {
  width: 150px;
  height: 120px;
  object-fit: cover;
  margin: 0 1rem;
  opacity: 0.5;
  transition: all 0.2s;
}
img:hover {
  opacity: 1;
}
.imgContainer {
  position: relative;
}
.imgContainer span {
  position: absolute;
  top: -5px;
  right: 0;
  cursor: pointer;
  display: block;
  width: 15px;
  height: 15px;
  background-color: transparent;
  text-align: center;
  line-height: 15px;
  font-size: 30px;
}
.bigger {
  width: 500px;
  height: auto;
  opacity: 1;
}
.invisible {
  display: none;
}

JavaScript（核心修改） #

const imgList = document.querySelectorAll("img");
const crosses = document.querySelectorAll(".imgContainer span");

// 初始化：所有关闭按钮默认隐藏
crosses.forEach(cross => cross.classList.add("invisible"));

// 图片点击事件：放大当前图片，管理关闭按钮显示
imgList.forEach(img => {
  img.addEventListener("click", function() {
    // 先重置所有图片和按钮的状态：移除放大类+隐藏按钮
    imgList.forEach(el => {
      el.classList.remove("bigger");
      el.closest(".imgContainer").querySelector("span").classList.add("invisible");
    });
    // 给当前图片添加放大类，显示对应的关闭按钮
    this.classList.add("bigger");
    this.closest(".imgContainer").querySelector("span").classList.remove("invisible");
  });
});

// 关闭按钮点击事件：移除放大类，隐藏自身
crosses.forEach(cross => {
  cross.addEventListener("click", function() {
    // 找到当前按钮对应的图片，移除放大类
    const targetImg = this.closest(".imgContainer").querySelector("img");
    targetImg.classList.remove("bigger");
    // 隐藏当前关闭按钮
    this.classList.add("invisible");
  });
});

关键逻辑解释： #

1. 初始化隐藏按钮：页面加载时，所有关闭按钮都加上.invisible类，符合初始无放大图片的状态。
2. 利用DOM关联元素：用closest(".imgContainer")找到当前元素的父容器，再从中获取对应的图片或按钮，不用依赖索引，代码更灵活。
3. 点击图片时的统一处理：先重置所有图片和按钮的状态，再单独激活当前图片和按钮，避免出现多个放大图片或多个显示的按钮。
4. 点击关闭按钮时的精准处理：只操作当前按钮对应的图片，然后隐藏自身，逻辑更清晰。

这样就能完美实现你要的效果：只有被放大（有.bigger类）的图片，它的关闭按钮才会显示，其他时候按钮都是隐藏的。

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