多模态框缩略图关联错误求助：点击缩略图触发所有模态显示同图

嘿，我完全懂你现在的困扰——点击任意模态框里的缩略图，所有模态框的大图都跟着变，这肯定不是你想要的效果。别担心，这个问题的核心其实就是让每个缩略图只对应自己所在模态框里的大图，而不是一股脑操作所有大图元素，我给你一个简单又可扩展的解决方案：

问题根源 #

你当前的myFunction函数不管点击哪个缩略图，都会同时修改expandedImg和expandedImg1的src属性，所以所有模态框的大图都会同步更新。而且手动给每个模态框新增变量的方式扩展性极差，要是有10个模态框就得写10个变量，太麻烦了。

解决方案 #

我们可以通过DOM元素的层级关系，让点击的缩略图自动找到自己所属模态框里的大图，只更新这一个大图：

1. 调整HTML结构（给每个模态框加统一容器）

把每个模态框的内容包裹在一个统一类名的容器里（比如modal-container），同时把大图的id改成统一的class（比如expanded-img），这样不用给每个大图单独命名：

<!-- Modal 1 对话框 -->
<div class="modal-container">
  <img class="expanded-img" style="width:80%" src="img1.jpg"> 
  <div class="col-md-2 product_img"> 
    <img src="img1.jpg" style="width:120px" onclick="myFunction(this);"> 
    <img src="img2.jpg" style="width:120px" onclick="myFunction(this);"> 
  </div>
</div>

<!-- Modal 2 对话框 -->
<div class="modal-container">
  <img class="expanded-img" style="width:80%" src="img1.jpg"> 
  <div class="col-md-2 product_img"> 
    <img src="img3.jpg" style="width:120px" onclick="myFunction(this);"> 
    <img src="img4.jpg" style="width:120px" onclick="myFunction(this);"> 
  </div>
</div>

2. 修改JavaScript函数

让函数通过点击的缩略图，向上找到所属的模态框容器，再定位到容器内的大图，只更新这个大图的src：

function myFunction(imgs) {
  // 找到当前缩略图最近的模态框容器
  const modalContainer = imgs.closest('.modal-container');
  // 在容器内找到对应的大图元素
  const expandImg = modalContainer.querySelector('.expanded-img');
  
  // 更新大图的地址
  expandImg.src = imgs.src;
  // 保持你原来的显示逻辑
  expandImg.parentElement.style.display = "block";
}

适配Bootstrap模态框（如果用了Bootstrap） #

看你用了col-md-2，大概率是Bootstrap模态框，那你可以直接用Bootstrap自带的.modal类作为容器，不用额外加modal-container：

<!-- Bootstrap Modal 1 -->
<div class="modal fade" id="modal1" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <img class="expanded-img" style="width:80%" src="img1.jpg"> 
        <div class="col-md-2 product_img"> 
          <img src="img1.jpg" style="width:120px" onclick="myFunction(this);"> 
          <img src="img2.jpg" style="width:120px" onclick="myFunction(this);"> 
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Bootstrap Modal 2 -->
<div class="modal fade" id="modal2" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <img class="expanded-img" style="width:80%" src="img1.jpg"> 
        <div class="col-md-2 product_img"> 
          <img src="img3.jpg" style="width:120px" onclick="myFunction(this);"> 
          <img src="img4.jpg" style="width:120px" onclick="myFunction(this);"> 
        </div>
      </div>
    </div>
  </div>
</div>

对应的JS只需要把closest的目标改成.modal：

function myFunction(imgs) {
  const modal = imgs.closest('.modal');
  const expandImg = modal.querySelector('.expanded-img');
  
  expandImg.src = imgs.src;
  expandImg.parentElement.style.display = "block";
}

为什么这个方法好用？ #

不管你以后加多少个模态框，都不用修改JavaScript代码，只要保持缩略图和大图在同一个容器内的结构就行，扩展性拉满，也不用再手动给每个大图起不同的ID啦。

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