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

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);">

问题是我使用了按钮标签而不是如上所示的输入