循环中的多个模态显示相同的信息而不是不同的信息

Question

我正在尝试创建一个网页，其中包含一堆带有数据库信息的卡片。

每张卡片上都会有一个“更多信息”按钮将创建一个弹出模式，其中包含与该卡片相同的信息以及更多信息。我知道我需要一个 while 循环来生成模态，并单独为模态提供不同的 ID。

我已经使用“id”完成了必要的操作数据库中唯一的列当我单击按钮时，我确实得到了模态，但唯一的问题是，无论我单击哪个按钮，模态都会显示最后一张卡片的信息（例如标题、字段、概要、描述）。

所有的卡片都显示了它们的个人信息。听起来我的 while 循环有问题？我确实检查了源代码&它确实正确地在每张特定卡片下方显示带有自己 id 的各个模态（具有正确的 id，例如 1、2、3、4。）请提供帮助。

<?php

    include("Config.php");              

    $query = ("SELECT * FROM proj");            

    $result = mysqli_query($conn, $query) or die( mysqli_error($conn));         

    while($test = mysqli_fetch_array($result))                              

    {                       

    ?>                  

    <div class="card"><div class="container1">

    <div class="card-text">  

    <h4><b><?php echo $test['title']; ?></b></h4>

    <b>field: </b><?php echo $test['field']; ?></br>    

    <p><?php echo $test['synopsis']; ?></p>

  <!-- Trigger/Open The Modal -->

  <button id="myBtn<?php echo $test['id']; ?>">More Info</button>

  <!-- The Modal -->    

  <div id="myModal<?php echo $test['id']; ?>" class="modal"> 

  <!-- Modal content -->

  <div class="modal-content">  

    <span class="close">&times;</span>

        <h4><b><?php echo $test['title']; ?></b></h4>

        <p><b>field: </b><?php echo $test['field']; ?></p>      

        <p><?php echo $test['synopsis']; ?></p>

        <p><?php echo $test['description']; ?></p>  

 <script>

// Get the modal

var modal = document.getElementById("myModal<?php echo $test['id']; ?>");

// Get the button that opens the modal

var btn = document.getElementById("myBtn<?php echo $test['id']; ?>");

// Get the <span> element that closes the modal

var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 

btn.onclick = function() {

  modal.style.display = "block";

}

// When the user clicks on <span> (x), close the modal

span.onclick = function() {

  modal.style.display = "none";

}

Answer 1

因此，此代码的问题在于，它会在循环的每次迭代中生成一个新的 script 元素，该元素会覆盖所有变量和事件侦听器。我建议采用不同的方法来做到这一点。将卡片和模态降价留在循环中向模态添加一个唯一的 id，事实上，您已经拥有了<div id="myModal<?php echo $test['id']; ?>"></div>现在让我们为按钮添加一个新属性，如下所示<button data-target="#myModal<?php echo $test['id']; ?>"></button>从循环中删除 script 标记，并为 所有 按钮编写一个新的事件侦听器，该事件侦听器将仅显示 id 属性等于所单击按钮的 data-target 属性的模态最终结果如下所示<?php    include("Config.php");                  $query = ("SELECT * FROM proj");                $result = mysqli_query($conn, $query);             while($test = mysqli_fetch_array($result))                                  {                           ?>                      <div class="card"><div class="container1">    <div class="card-text">      <h4><b><?php echo $test['title']; ?></b></h4>    <b>field: </b><?php echo $test['field']; ?></br>        <p><?php echo $test['synopsis']; ?></p>  <!-- Trigger/Open The Modal -->  <button data-target="myModal<?php echo $test['id']; ?>" class="action-btn">More Info</button>  <!-- The Modal -->      <div id="myModal<?php echo $test['id']; ?>" class="modal">   <!-- Modal content -->  <div class="modal-content">      <span class="close">&times;</span>        <h4><b><?php echo $test['title']; ?></b></h4>        <p><b>field: </b><?php echo $test['field']; ?></p>              <p><?php echo $test['synopsis']; ?></p>        <p><?php echo $test['description']; ?></p>   </div></div>      </div></div></div>                                  <?php            }            mysqli_close($conn);            ?>           <script>var buttons = document.querySelectorAll(".action-btn");// Feel free to use any other way to iterate over buttonsfor (var i = 0; i < buttons.length; i++) {  buttons[i].addEventListener("click", function (event) {    var modal = (document.getElementById(      event.target.getAttribute("data-target")    ).style.display = "block");  });}// Add code to close modals</script>   注意：Bootstrap 提供了一种更简单的方式来使用模态框并提供所有这些功能。