Javascript 如何使用jQuery和Bootstrap在文档中创建多个模态？

以下函数只能打开一个模式，因为它使用元素ID

如何扩展此函数以打开多个模态

代码的HTML/PHP部分注意应该打开模型的

$getUsers='SELECT*FROM users'； $result=$pdo->prepare$getUsers； $result->execute； 而$row=$result->fetchPDO:：FETCH_ASSOC{ 如果$row['usergroup']==管理员{ 回响 }否则{ 回响 } echo.$row['username']； 回响 回响 } 模态

信息 &时代； Javascript

$document.readyfunction{ $'openUserInfoModal'。单击，函数{ var dataURL=$this.attr'data-href'； $'userModalBody.modal body'.loaddataURL，函数{ $'userInfoModal'.modal{show:true}； }; }; }; 同样，在显示的第一行，您可以单击a href，它将打开模式并显示用户信息。在第一行之后，单击a href不会执行任何操作，也不会打开模式对话框

另外，如果您删除第一行/删除用户，第二行现在成为第一行，您可以单击a href，它将显示用户数据

---

我真的不确定是什么导致了这个问题，但感谢您的帮助。

原因是您复制了一个元素的id。因此，当您单击其中任何一个时，jQuery实际上只使用第一个。因此，您需要更改它，以便使用类来打开模式，而不是使用id

PHP

---

ID在HTML中是唯一的。在PHP代码中，似乎有一个循环可以生成具有相同ID的HTML元素。另外，请注意，众所周知的UI原则是，您不应该同时打开多个模态对话框。您可以使用用户的属性生成唯一ID，甚至更简单，使用迭代的索引来执行此操作，或者使用类名并根据按下的按钮查找相应的模式。@JaredSmith-我不想同时打开多个模式对话框。@Russell如果您想使用ajax加载int内容，那么您只有一个模式包装器，这将很有帮助。。如果从未查看过dom，则填写dom没有用。。

$getUsers = 'SELECT * FROM users';
  $result         = $pdo->prepare($getUsers);
  $result->execute();
  while ($row = $result->fetch(PDO::FETCH_ASSOC)) {
      if ($row['usergroup'] === "Admin") {
        echo "<tr class='table-danger'>";
      } else {
        echo "<tr>";
      }
      echo "<td><center>" . $row['username'] . "</center></td>";
      echo '<td><center><a href="javascript:void(0);" data-href="php/userInfo.php?id='.$row['user_id'].'" class="openUserInfoModal">View</a></center></td>';
      echo "</tr>";
}

$(document).ready(function() {
  $('.openUserInfoModal').on('click',function(){
      var dataURL = $(this).attr('data-href');
      $('#userModalBody.modal-body').load(dataURL,function(){
          $('#userInfoModal').modal({show:true});
      });
  });
});