点击其他元素时如何移除对应元素的class？图片画廊功能实现问题

你当前的代码仅对点击的目标图片切换bigger类，没有额外处理其他已激活图片的类移除逻辑，因此会出现多张图片同时保留放大状态的问题。

方案1：点击时先清空所有图片的bigger类，再处理当前图片状态 #

实现逻辑直观，适合图片数量不多的场景，修改后代码如下：

const imgList = document.querySelectorAll("img");
for (let i = 0; i < imgList.length; i++) {
  imgList[i].addEventListener("click", function () {
    // 先移除所有图片的bigger类
    imgList.forEach(img => img.classList.remove("bigger"));
    // 给当前点击的图片添加bigger类
    this.classList.add("bigger");
  });
}

如果需要支持点击已放大的图片取消放大效果，可以调整逻辑如下：

const imgList = document.querySelectorAll("img");
for (let i = 0; i < imgList.length; i++) {
  imgList[i].addEventListener("click", function () {
    const isCurrentActive = this.classList.contains("bigger");
    // 清空所有图片的激活状态
    imgList.forEach(img => img.classList.remove("bigger"));
    // 之前未激活就添加类，已激活则保持移除状态实现取消放大
    if (!isCurrentActive) {
      this.classList.add("bigger");
    }
  });
}

方案2：用变量记录上一次激活的图片（性能更优） #

不需要每次点击都遍历全部图片，仅处理上一次激活元素和当前点击元素，适合图片数量较多的场景：

const imgList = document.querySelectorAll("img");
// 存储当前处于激活放大状态的图片元素
let activeImg = null;

for (let i = 0; i < imgList.length; i++) {
  imgList[i].addEventListener("click", function () {
    // 上一次有激活的图片且不是当前点击的图片，就移除它的放大类
    if (activeImg && activeImg !== this) {
      activeImg.classList.remove("bigger");
    }
    // 切换当前点击图片的放大状态
    this.classList.toggle("bigger");
    // 更新激活元素记录
    activeImg = this.classList.contains("bigger") ? this : null;
  });
}

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