如何为foreach循环中的每个数据打开一个带有按钮的模式？答案

【问题标题】：How to open a modal with a button for every data from the foreach loop?如何为foreach循环中的每个数据打开一个带有按钮的模式？
【发布时间】：2019-06-08 08:29:41
【问题描述】：

我通过 foreach 循环获得帖子（在我正在编码的博客上）的评论。

如果管理员登录，他们会在每条评论旁边看到一个“x”按钮来删除它们。

当按钮被点击时，它应该打开一个模态框，管理员必须在其中确认他想要删除评论。

问题是：现在只有第一个按钮打开模态，我不知道为什么，因为我对 javascript 一无所知，我从一个关于模态框。

这是网站本身的代码和它的脚本：

<?php if(isset($_SESSION['admin']) && $_SESSION['admin'] == true): ?>
  <button id="delete-btn" class="delete-button">x</button>
<?php endif;?>
  <div id="delete-modal" class="modal">
    <div class="modal-content">
      <span class="close">&times;</span>
       <p class="modal-text"> Are you sure you want to delete this comment?
        <br /><br /> You will not be able to undo this.</p>
         <form method="post" action="post?id=<?php echo e($post['id']);?>">
          <div class="confirmation-delete">
           <a href="delete-comment?id=<?php echo e($comment->id); ?>" name="delete-comment">delete comment<a/>
          </div>
         </form>
     </div>
   </div>


<script>
  var modal = document.getElementById('delete-modal');
  var btn = document.getElementById("delete-btn");
  var span = document.getElementsByClassName("close")[0];

  btn.onclick = function() {
    modal.style.display = "block";
  }
  span.onclick = function() {
    modal.style.display = "none";
  }
  window.onclick = function(event) {
    if (event.target == modal) {
      modal.style.display = "none";
    }
  }
</script>

当我点击第一条评论旁边的按钮时，模式会打开，但如果我点击以下 cmets 旁边的按钮，它不会。

我不知道出了什么问题或如何让它工作，我希望任何人都可以帮助我。

【问题讨论】：

Id 在 html 中必须是唯一的。如果您有多个 cmets，并且每个 cmets 都有自己的 id='delete-btn' 的删除按钮，则它仅适用于第一个。而不是 id 你可以使用类名

标签： javascript php foreach modal-dialog

【解决方案1】：

问题在于，您只针对 ID 为 delete-btn 的按钮，并且 ID 对于 HTML 中的每个元素都是唯一的。何时附加 onClick 方法，它仅针对具有该 ID 的第一个按钮，因此仅在第一次打开模式时。您需要使用class 定位按钮。您可以使用 addEventListener() 方法来实现这一点。转到链接以阅读有关它的更多信息https://www.w3schools.com/js/js_htmldom_eventlistener.asp

提示：您可以使用 jQuery 轻松做到这一点。

【讨论】：

【解决方案2】：

请检查下面提到的解决方案并相应地更新您的代码。如果它不起作用，请告诉我。

$(document).ready(function(){
  $('.delete-button').click(function(){
    $('#delete-modal').modal('show');
  });
  $('.delete-comment,.close').click(function(e){
    e.preventDefault();
    $('#delete-modal').modal('hide');
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
  <button id="delete-btn" class="delete-button">x</button>
  <button id="delete-btn" class="delete-button">x</button>
  <button id="delete-btn" class="delete-button">x</button>
  <button id="delete-btn" class="delete-button">x</button>
  <button id="delete-btn" class="delete-button">x</button>
  
  <div id="delete-modal" class="modal">
    <div class="modal-content">
      <span class="close">&times;</span>
       <p class="modal-text"> Are you sure you want to delete this comment?
        <br /><br /> You will not be able to undo this.</p>
         <form method="post" action="post?id">
          <div class="confirmation-delete">
           <a href="delete-comment" class="delete-comment" name="delete-comment">delete comment<a/>
          </div>
         </form>
     </div>
   </div>

【讨论】：