Javascript 为什么这个"；切换"；代码只按顺序工作？

想象一下，在一列中有一页图像。此“图像缩放”效果切换开关仅按正向顺序工作。由于某些原因，我无法向后切换任何图像元素

示例：

单击图像1，然后单击图像2（代码将缩放图像1，然后缩放图像2，关闭图像1）

单击图像2，然后单击图像1（代码将缩放图像2，然后单击“无”）

//安装图像缩放效果
window.onload=函数（）{
AddEventToFigureMg（）
};
函数addEventToFigureImg（）{
var htmlFigures=document.getElementsByTagName（“图”）；
for（var i=0；i=2）{
effectCount[0]。classList.remove（“效果缩放”）；
};
//如果没有缩放效果，请关闭
if（effectCount.length我在进一步分解逻辑后找到了答案。谢谢你的提示

  function addEventToFigureImg() {
  var htmlFigures = document.getElementsByTagName("figure");
  
  for (var i = 0; i < htmlFigures.length; i++) {
    htmlFigures[i].addEventListener("click", function() {
      
      // toggle zoom and add darkroom effect
      this.classList.toggle("effect-zoom");
      document.documentElement.classList.add("not-a-modal-background");
      
      // center this
      this.scrollIntoView({
        behavior: "smooth",
        block: "center"
      });
      
      // count zoom effect
      var effectCount = document.getElementsByClassName("effect-zoom");

      // if there are no zoom effects
      if (effectCount.length <= 0) {
        // remove darkroom 
        document.documentElement.classList.remove("not-a-modal-background");
      }

      // if there are more effects
      else if (effectCount.length >= 1) {
        // find all effects
        for (var i = 0; i < htmlFigures.length; i++) {
          // zoom out others
          htmlFigures[i].classList.remove("effect-zoom");
        }
        this.classList.toggle("effect-zoom");
      };
      
    }, false);
  }
}

函数addEventToFigureImg（）{
var htmlFigures=document.getElementsByTagName（“图”）；
for（var i=0；i
“如果有多个元素，则缩小其他元素”-您仅从
effectCount
中的第一个元素中删除类。当您单击“image 1”时，
effectCount[0]
将显示为“image 1”。是否有更好的方法来识别页面上的“其他”元素？我正在尝试一个for循环，但感觉效率很低。
  function addEventToFigureImg() {
  var htmlFigures = document.getElementsByTagName("figure");
  
  for (var i = 0; i < htmlFigures.length; i++) {
    htmlFigures[i].addEventListener("click", function() {
      
      // toggle zoom and add darkroom effect
      this.classList.toggle("effect-zoom");
      document.documentElement.classList.add("not-a-modal-background");
      
      // center this
      this.scrollIntoView({
        behavior: "smooth",
        block: "center"
      });
      
      // count zoom effect
      var effectCount = document.getElementsByClassName("effect-zoom");

      // if there are no zoom effects
      if (effectCount.length <= 0) {
        // remove darkroom 
        document.documentElement.classList.remove("not-a-modal-background");
      }

      // if there are more effects
      else if (effectCount.length >= 1) {
        // find all effects
        for (var i = 0; i < htmlFigures.length; i++) {
          // zoom out others
          htmlFigures[i].classList.remove("effect-zoom");
        }
        this.classList.toggle("effect-zoom");
      };
      
    }, false);
  }
}