如何将数据属性值传递到Bootstrap模态框内的元素中？

你的代码存在几个关键问题，导致无法正确传递数据到模态框：

1. 数据属性获取错误：按钮上的自定义属性是data-bs-id，但你用$(this).data('id')获取，应该改为$(this).data('bs-id')
2. DOM元素操作错误：#elId是<p>标签，val()方法仅适用于表单元素（如input），需要改用text()或html()来修改内容
3. 事件绑定逻辑：Bootstrap 5推荐使用模态框的show.bs.modal事件来处理数据传递，避免和原生触发逻辑冲突

以下是修正后的完整代码：

HTML代码 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

<!-- 示例按钮，可复制多个修改data-bs-id值 -->
<a class="btn btn-link primary openBlogDialog" data-bs-toggle="modal" href="#openBlog" data-bs-id="3">Open<i class="uil uil-arrow-right"></i></a>

<div class="modal fade absolute-center" id="openBlog" tabindex="-1" aria-labelledby="blog-single-label" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <span id="modalTitle">加载中...</span>
        <button class="btn-close" data-bs-dismiss="modal" aria-label="close"></button>
      </div>

      <div class="modal-body">
        <img id="modalImage" src="" class="img-fluid rounded-md shadow" alt="博客图片">
        <p id="elId">加载中...</p>
      </div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js" integrity="sha384-IDwe1+LCz02ROU9k972gdyvl+AESN10+x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk" crossorigin="anonymous"></script>

JavaScript代码 #

// 监听模态框显示前的事件
$('#openBlog').on('show.bs.modal', function (event) {
  // 触发模态框的按钮元素
  var button = $(event.relatedTarget);
  // 获取按钮上的博客ID
  var blogId = button.data('bs-id');
  
  // 这里可以根据ID请求对应数据，示例直接赋值
  // 实际项目中可通过AJAX获取数据后更新模态框内容
  var blogData = {
    title: '博客标题 ' + blogId,
    pictureUrl: 'https://picsum.photos/800/400?random=' + blogId,
    content: '这是ID为' + blogId + '的博客内容'
  };
  
  // 更新模态框内容
  $(this).find('#modalTitle').text(blogData.title);
  $(this).find('#modalImage').attr('src', blogData.pictureUrl);
  $(this).find('#elId').text(blogData.content);
});

关键修改说明 #

• 使用Bootstrap 5官方的show.bs.modal事件，确保在模态框显示前完成数据更新
• 正确获取data-bs-id属性值
• 针对不同类型的DOM元素使用对应的修改方法（text()修改文本，attr()修改图片地址）
• 预留了AJAX请求数据的位置，方便对接实际后端接口

内容的提问来源于stack exchange，提问作者Алмас Кабыкен