显示选定表项的引导模式

Question

我正在尝试为 Web 应用程序创建一个简单的好友列表。我正在遍历一个 SQL 表来检索当前用户的好友列表。表格中的每一行都有一个按钮，用于显示所选用户 ID 的模式。我遇到的当前问题是它只显示列表中最后一个用户的模式，而其他所有人都不会弹出。我需要为我单击的每个用户弹出模式并显示该用户的 ID。 例子：

这是我目前的代码：

HTML/PHP：

<?php
// Full SQL retrieval omitted above 
$buddyUid = '';
while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
    $buddyUid = $row['buddy_uid'];
                                                                   
    echo "<tr>";
    echo "<td> <input type='checkbox'></td>";
    echo "<td>" . $buddyUid . "</td>";
    echo "<td> <button type='button' onclick='javascript:selectBuddy($(this)); ' 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>

Javascript：

function selectBuddy(buddy) {
    $('#modal-' + buddy).modal('show'); 
}

Answer 1

$(this) 指的是 DOM 中 onclick 属性所属的元素：

在您的情况下，仅获取 buddy_id 只需更改 onclick 事件

从这里

...onclick='javascript:selectBuddy($(this));'...

到这里

...onclick='javascript:selectBuddy(".$buddyUid.");'...

也改变你的模态ID

<div class="modal fade" id="modal-<?=$buddyUid?>" ...

到

<div class="modal fade" id="modal-buddy" ....

然后像这样的javascript代码

function selectBuddy(buddy) {
    $('#modal-buddy').find('.modal-body').html(buddy);
    $('#modal-buddy').modal('show'); 
}