在多个模态中使用缩略图，上一个模态缩略图显示在下一个模态上

Question

非常感谢您的帮助，我找不到任何解决方案，我很讨厌js

<script>
function myFunction(imgs) {
  var expandImg = document.getElementById("expandedImg");
  expandImg.src = imgs.src;
  expandImg.parentElement.style.display = "block";

<!-- I Thought maybe I would have to make a new var for each modal which isn't ideal -->
<!-- But was the only way I could figure out how to get multiple modals working with thumbnails -->

  var expandImg1 = document.getElementById("expandedImg1");
  expandImg1.src = imgs.src;
  expandImg1.parentElement.style.display = "block";
}
</script>

//Modal 1 dialog 

<img id="expandedImg" 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>

//Modal 2 dialog 

<img id="expandedImg1" 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>

Feels like it's probably something really dumb I overlooked or don't know yet but any help would be greatly appreciated

Answer 1

我发现了问题，很抱歉，我缺少一些重要的代码

<input type="button" value="Quick View" src="img/jesus.jpg" class="viewbtn btn btn- 
primary" data-toggle="modal" data-target="#product_view7" onclick="myFunction(this);">

问题是我使用了按钮标签而不是输入