如何为a/img标签绑定onClick事件识别点击图片以动态更新模态框内容

你可以直接利用Bootstrap自带的模态框触发事件实现，不需要单独为每个<a>标签绑定点击事件，操作步骤如下：

1. 修正现有HTML问题 #

先调整你的<a>标签配置，把每个<a>的href属性改为对应大图的地址（你当前第二个<a>的href误写为了Picture1.jpg，要修正）：

<!-- 点击触发模态框的小图链接，href填对应大图的地址 -->
<a href="images/Picture1.jpg" data-bs-toggle="modal" data-bs-target="#exampleModal">
    <img src="images/Picture1-small.jpg" alt="图片1" width="100">
</a>
<a href="images/Picture2.jpg" data-bs-toggle="modal" data-bs-target="#exampleModal">
    <img src="images/Picture2-small.jpg" alt="图片2" width="100">
</a>

*如果小图和大图是同地址只是尺寸不同，直接填同地址即可，小图用压缩版单独存小尺寸地址可以加快页面加载速度。

你的模态框代码不需要改动，保持原有结构即可。

2. 添加JS逻辑监听模态框弹出事件 #

Bootstrap 5 原生JS写法： #

const imageModal = document.getElementById('exampleModal')
// 监听模态框弹出前的事件
imageModal.addEventListener('show.bs.modal', event => {
  // 获取触发本次模态框弹出的<a>标签元素
  const triggerLink = event.relatedTarget
  // 取<a>标签的href属性，即大图地址
  const largeImgSrc = triggerLink.getAttribute('href')
  // 赋值给模态框内的预览图片
  const previewImg = imageModal.querySelector('#imagepreview')
  previewImg.src = largeImgSrc
  // 可选：同步修改alt属性保证可访问性
  previewImg.alt = triggerLink.querySelector('img').getAttribute('alt')
})

Bootstrap 4 jQuery写法（如果用jQuery的话）： #

$('#exampleModal').on('show.bs.modal', function (e) {
  const largeImgSrc = $(e.relatedTarget).attr('href')
  const imgAlt = $(e.relatedTarget).find('img').attr('alt')
  $('#imagepreview').attr('src', largeImgSrc).attr('alt', imgAlt)
})

该方案适配任意数量的小图，后续新增图片只要按照规则写<a>标签即可，不需要修改JS逻辑。

内容的提问来源于stack exchange，提问作者Meana