点击表格选中项按钮弹出Bootstrap Modal仅显示最后一条数据如何解决

问题根因 #

• 你的Modal代码写在了循环外部，循环执行结束后$buddyUid仅保留了最后一条好友记录的ID，因此页面上仅生成了最后一个用户对应的Modal，其他用户的Modal不存在，点击对应按钮自然无响应
• 你同时给按钮加了data-bs-toggle原生触发属性和自定义onclick事件，且selectBuddy函数的参数处理逻辑错误：你传入的是$(this)jQuery对象，直接拼接进选择器会生成无效的选择器规则，也会导致触发失败

最优解决方案：共用单个Modal动态传值 #

这种方案不需要循环生成多个Modal，减少冗余代码，性能更好：

第一步：修改PHP循环部分代码 #

<?php
// Full SQL retrieval omitted above 
while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
    $buddyUid = $row['buddy_uid'];
                                                                    
    echo "<tr>";
    echo "<td> <input type='checkbox'></td>";
    echo "<td>" . $buddyUid . "</td>";
    // 去掉onclick，添加data-buddy-uid存储用户ID，data-bs-target指向同一个Modal
    echo "<td> <button type='button' class='buddy-modal-btn' data-bs-toggle='modal' data-bs-target='#commonBuddyModal' data-buddy-uid='".$buddyUid."'><i class='fas fa-share-square'></i></button></td>";
    echo "</tr>";
}
?>

第二步：页面只保留一个公共Modal #

<!-- 公共Modal -->
<div class="modal fade" id="commonBuddyModal" tabindex="-1" aria-labelledby="buddyModalLabel" aria-hidden="true">
    <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
                  <h5 class="modal-title" id="buddyModalLabel">用户信息</h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body" id="buddyUidContainer">
                  <!-- 这里动态填充用户ID -->
               </div>
               <div class="modal-footer">
                   <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                   <button type="button" class="btn btn-primary">Save changes</button>
                </div>
           </div>
       </div>
   </div>

第三步：修改JS逻辑，监听Modal弹出事件动态赋值 #

// 监听Modal显示前的事件，获取触发按钮的用户ID填充到Modal中
$('#commonBuddyModal').on('show.bs.modal', function (event) {
  // 获取触发弹出的按钮元素
  const button = $(event.relatedTarget)
  // 取出按钮上存储的用户ID
  const buddyUid = button.data('buddy-uid')
  // 把ID填充到Modal的内容区域
  $('#buddyUidContainer').text(buddyUid)
})

备选方案：循环生成多个Modal #

如果确实需要每个用户单独生成Modal，把Modal代码放到while循环内部，同时删除冗余的onclick属性即可：

<?php
// Full SQL retrieval omitted above 
while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
    $buddyUid = $row['buddy_uid'];
                                                                    
    echo "<tr>";
    echo "<td> <input type='checkbox'></td>";
    echo "<td>" . $buddyUid . "</td>";
    // 去掉onclick，仅保留data-bs属性即可触发
    echo "<td> <button type='button' data-bs-toggle='modal' data-bs-target='#modal-".$buddyUid."'><i class='fas fa-share-square'></i></button></td>";
    echo "</tr>";
    // 把Modal放到循环内，每个用户生成一个
?>
    <div class="modal fade" id="modal-<?=$buddyUid?>" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
             <div class="modal-content">
                 <div class="modal-header">
                      <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                  </div>
                  <div class="modal-body">
                      <?=$buddyUid?>
                   </div>
                   <div class="modal-footer">
                       <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                       <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
               </div>
           </div>
       </div>
<?php
}
?>

这种方案缺点是好友数量多的时候会生成大量重复的Modal代码，页面体积变大，性能不如公共Modal方案。

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