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

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 modalvar modal = document.getElementById("myModal<?php echo $test['id']; ?>");// Get the button that opens the modalvar btn = document.getElementById("myBtn<?php echo $test['id']; ?>");// Get the <span> element that closes the modalvar 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 modalspan.onclick = function() {  modal.style.display = "none";}

Answer 1

因此，此代码的问题在于，它会在循环的每次迭代中生成一个新的 script 元素，该元素会覆盖所有变量和事件侦听器。

我建议采用不同的方法来做到这一点。

1. 将卡片和模态降价留在循环中

2. 向模态添加一个唯一的 id，事实上，您已经拥有了<div id="myModal<?php echo $test['id']; ?>"></div>

3. 现在让我们为按钮添加一个新属性，如下所示<button data-target="#myModal<?php echo $test['id']; ?>"></button>

4. 从循环中删除 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 buttons

for (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 提供了一种更简单的方式来使用模态框并提供所有这些功能。