锚点/图片标签上的 onClick 事件 html

Question

我有许多小图像，我正在使用 HTML 进行渲染。当用户点击图片时，他们接下来会以大尺寸在模态主体中打开。因为我需要动态更改模态主体的内容，例如单击 Picture1.jpg 时，模态正文应包含 picture1.jpg，反之亦然。

但是，我不确定如何在 <a> 标签或 <img> 标签上触发 onclick 事件来获取一些信息，帮助我识别点击了哪个图像。

<a href="images/Picture1.jpg" data-bs-toggle="modal" data-bs-target="#exampleModal">
    <img src="images/Picture1.jpg" alt="image not available">
</a>
<a href="images/Picture1.jpg" data-bs-toggle="modal" data-bs-target="#exampleModal">
    <img src="images/Picture2.jpg" alt="image not available">
</a>

模态

<div class="modal-body">
       <img src="images/Picture1.jpg" alt="image not available" id="imagepreview" style="width:100%; height: 100%;" >
</div>

Answer 1

如果您想使用 Jquery.

，您可以在普通 javascript 中使用 event.target 和 $(this)

//Plain Javascript
document.getElementsByTagName('img')[0].addEventListener("click", function(event) {
  console.log(event.target.src);
});

//Jquery
$('img').click(function() {
  console.log($(this).attr('src'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<img src="https://picsum.photos/200">

Answer 2

我会使用 Button 因为你实际上并没有链接，你正在执行一个 JS 函数。然后我会向按钮添加一个事件侦听器，根据 button 的 data-src 值更新目标图像 src。

const buttonList = document.getElementsByClassName('target-button');
const modalImg = document.getElementById('imagepreview');

const processImg = (imgSrc) => () => {
  modalImg.src = imgSrc;
};

Array.from(buttonList).forEach((button) => {
  const buttonImgSrc = button.dataset.src;
  button.addEventListener('click', processImg(buttonImgSrc))
});

<button class="target-button" data-src="images/Picture1.jpg" data-bs-toggle="modal" data-bs-target="#exampleModal">
    <img src="images/Picture1.jpg" alt="image not available" />
</button>
<button class="target-button" data-src="images/Picture2.jpg" data-bs-toggle="modal" data-bs-target="#exampleModal">
    <img src="images/Picture2.jpg" alt="image not available" />
</button>

<img src="" alt="image not available" id="imagepreview" style="width:100%; height: 100%;" />

锚点/图片标签上的 onClick 事件 html

onClick event on the anchor/ image tag html

javascript

html

jquery

events

bootstrap-modal