为何JavaScript图片缩放toggle代码仅正向生效，反向操作失效？

核心问题根源 #

代码的异常完全来自对getElementsByClassName返回集合的特性误解+移除逻辑无针对性，具体触发逻辑和两种操作路径的表现对比如下：

• 正向操作（先点图1、再点图2）符合预期的原因：getElementsByClassName返回的集合严格按照DOM文档顺序排序，此时先打开的图1是DOM顺序更靠前的元素，代码中effectCount[0]刚好匹配图1，因此点击图2时会正确移除图1的缩放类，流程正常。
• 反向操作（先点图2、再点图1）无响应的原因：
  1. 先点击图2时，会给图2加上effect-zoom类，此时页面里只有图2带缩放类，交互符合预期。
  2. 后续点击图1时，代码第一行先拿到动态集合（此时集合里只有图2，长度1）；紧接着给图1加上effect-zoom类，因为图1在DOM顺序里更靠前，动态集合自动更新后会把图1排在第一位。
  3. 代码判断集合长度≥2后，直接移除集合第一个元素（也就是图1自己）的缩放类——相当于刚给图1加上的效果立刻被删掉，完全没有操作到图2的类，最终表现为“点击图1无任何响应，图2的缩放效果一直保留”。

原代码的两个设计缺陷 #

• 动态集合依赖：没有意识到getElementsByClassName返回的是实时更新的HTMLCollection，排序规则完全遵循DOM文档顺序，和交互操作的时间顺序、元素被点击的先后无关，靠索引取元素的逻辑完全不可靠。
• 移除目标无针对性：没有区分“当前点击的元素”和“其他已开缩放的元素”，所有移除操作都靠索引碰运气，只要点击的元素在DOM顺序中早于之前已打开的缩放元素，就会出现“自我移除”的bug。

修复方案 #

修正核心逻辑：不再依赖动态集合的索引顺序做移除操作，在点击触发时先抓取静态的缩放元素快照，精准移除除当前点击元素之外的其他缩放类元素，参考实现如下：

// install image zoom effect
window.onload = function () {
  addEventToFigureImg()
};

function addEventToFigureImg() {
  const htmlFigures = document.getElementsByTagName("figure");
  
  for (let i = 0; i < htmlFigures.length; i++) {
    htmlFigures[i].addEventListener("click", function() {
      // 抓取当前已带缩放类的元素静态快照
      const prevZoomed = Array.from(document.getElementsByClassName("effect-zoom"));

      // 切换当前点击元素的缩放状态
      this.classList.toggle("effect-zoom");
      document.documentElement.classList.add("not-a-modal-background");
      
      // 精准移除其他元素的缩放效果
      prevZoomed.forEach(el => {
        if (el !== this) el.classList.remove("effect-zoom");
      });
      
      // 无缩放元素时移除背景标识类
      if (document.getElementsByClassName("effect-zoom").length === 0) {
        document.documentElement.classList.remove("not-a-modal-background");
      };
    }, false);
  }
}

修正后的逻辑不受元素DOM顺序影响，不管正向、反向点击任意图片，都能实现“同时只保留一个图片的缩放效果”的预期交互。

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