如何在单击图像时动态更改模态的内容

Posted 2023-03-21

【中文标题】如何在单击图像时动态更改模态的内容

【英文标题】：how to dynamically change the content of modal on an Image click

【发布时间】：2022-01-03 19:37:07

【问题描述】：

我在 html 页面上有以下 3 个缩略图。当用户单击这些图像中的任何一个时，我想以模式显示该特定图像。

如何在每次点击图片时在模态体内动态传递图片名称？

<a href="images/Picture1.jpg" data-bs-toggle="modal" data-bs-target="#exampleModal">
  <img src="images/Picture1.jpg"  onclick=check(this)>
</a>
<a href="images/Picture2.jpg" data-bs-toggle="modal" data-bs-target="#exampleModal">
  <img src="images/Picture2.jpg"  onclick=check(this)>
</a>
<a href="images/Picture3.jpg" data-bs-toggle="modal" data-bs-target="#exampleModal">
  <img src="images/Picture3.jpg"  onclick=check(this)>
</a>

模态

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Image</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <img src="images/Picture1.jpg"  id="imagepreview" style="width: 100%; height: 100%;">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Js 函数告诉我们点击了哪张图片

function check(img) 
  var src = img.src.replace(/^.*[\\\/]/, "");
  console.log(src);

【参考方案1】：

您可以将模态正文中图像的src 属性替换为被点击的图像之一。

每张图片都有onclick=check(this)。这意味着函数check 将接收被点击的img 元素作为参数。

您可以通过使用document.getElementById() 来选择模态图像中的id，并使用参数中img 元素的src 更新模态图像的src。

function check(img) 
  document.getElementById("imagepreview").src = img.src;

【讨论】：

对不起，我抓不到你。如何替换modal-body中图片的src属性？

@Meana 我更新了我的答案来解释如何。但是你的问题的答案是我提供的代码 sn-p 中唯一的函数检查行。

谢谢。它有效。