Как открыть модал с кнопкой для всех данных из цикла foreach? - PullRequest
Новая
       15

Как открыть модал с кнопкой для всех данных из цикла foreach?

0 голосов
/ 14 января 2019

Я получаю комментарии к сообщению (в блоге, который я кодирую) с циклом 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>

Когда я нажимаю кнопку рядом с первым комментарием, открывается модальное окно, но если я нажимаю кнопку рядом со следующими комментариями, это не так.

Я не знаю, что не так или как заставить это работать, я надеюсь, что кто-нибудь может мне помочь с этим.

Ответы [ 2 ]

0 голосов
/ 14 января 2019

Проблема заключается в том, что вы выбираете только кнопку с идентификатором delete-btn и идентификаторы уникальны для каждого элемента в HTML. Когда прикрепить метод onClick к этому, он нацелен только на первую кнопку с таким идентификатором, следовательно, только при первом открытии модального окна. Вам нужно нацелить кнопки с помощью class. Вы можете добиться этого, используя метод addEventListener (). Перейдите по ссылке, чтобы узнать больше об этом https://www.w3schools.com/js/js_htmldom_eventlistener.asp

СОВЕТ : это легко сделать с помощью jQuery.

0 голосов
/ 14 января 2019

Пожалуйста, проверьте решение ниже и обновите ваш код соответственно. Дайте мне знать, если это не сработает. 

$(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>
...