时间戳

首页 > 解决方案 > 在多个模态中使用缩略图前一个模态缩略图显示到下一个模态

javascript - 在多个模态中使用缩略图前一个模态缩略图显示到下一个模态

问题描述

非常感谢任何帮助，我找不到任何解决方案，而且我很讨厌 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

标签： javascripthtmlmodal-dialogbootstrap-modal

解决方案

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

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

问题是我有使用的按钮标签而不是上面显示的输入

推荐阅读