Bootstrap模态框点击不同按钮标题不更新，求非独立事件处理方案

嘿，这个坑我之前踩过！不用给每个按钮都写独立的onclick，咱们用Bootstrap原生的数据属性+模态框内置事件就能搞定，代码清爽还易于维护，具体步骤如下：

1. 给按钮添加自定义数据属性 #

首先修改你的按钮HTML，给每个触发模态框的按钮加上一个自定义数据属性，比如data-img-title，把对应图片的标题存进去。举个例子：

<!-- 第一张图片对应的按钮 -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#yourModalId" data-img-title="春日花海">
  查看这张图
</button>

<!-- 第二张图片对应的按钮 -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#yourModalId" data-img-title="雪山日出">
  查看这张图
</button>

同时确保你的模态框里有一个可选中的标题元素，比如：

<div class="modal-header">
  <h5 class="modal-title" id="modalTitle">默认标题</h5>
  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>

2. 写一个通用的事件监听函数 #

接下来只需要写一段通用的JS代码，监听Bootstrap模态框的show.bs.modal事件——这个事件会在模态框即将显示的时候触发，正好适合我们更新标题：

// 获取你的模态框元素
const modal = document.getElementById('yourModalId');

// 监听模态框的show事件
modal.addEventListener('show.bs.modal', function(event) {
  // event.relatedTarget就是触发模态框的那个按钮
  const triggerBtn = event.relatedTarget;
  // 从按钮的data属性里取出图片标题
  const targetTitle = triggerBtn.getAttribute('data-img-title');
  // 获取模态框的标题元素
  const modalTitle = modal.querySelector('#modalTitle');
  // 更新标题文本
  modalTitle.textContent = targetTitle;
});

为什么这个方案更好？ #

• 无需重复代码：不管你加10个还是20个按钮，只要给按钮加上data-img-title属性，这段代码就能自动处理，不用给每个按钮写单独的onclick
• 符合Bootstrap设计思路：利用框架原生的事件和数据属性，避免了自定义事件的冗余代码
• 扩展性强：如果后续需要传递更多信息（比如图片链接、描述），只需要添加更多data-*属性，在事件监听里取出即可

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