javascript - 为每个循环从 php 传递 html 模式框中的唯一值

Question

我有一个 PHP for 循环，在我的 php for 循环中我有一个 html 模式框。我的 PHP for 循环从数据库获取数据并将其回显到 div 标签中(附图)Div List Image 。每个 div 标签都有一个模态框，因此每当我单击 div 元素时，都会出现一个像这样的模态框 Modal Box 。问题是无论我单击哪个 div，我都会在模态框中得到相同的一个 div 值。我想要的只是无论我单击哪个 Div 元素，我都应该在模式框中获得该特定值。

我还了解我可以在模式框中传递唯一的 ID。但是有没有另一种方法可以实现，因为我也会在模式框中有一个 HTML Web 表单。

提前谢谢您:)

我的 php 和 html 代码:

  <?php
   foreach($results as $data){
    $id = $data['no'];
    $title = $data['Title'];
    $description = $data['Description'];
    $date = $data['Date_Submitted'];
    $total = $data['totalNumber'];

    //Echo the data from db into div elements

  echo '<div class="row">
        <div>
                    <h4>'.$total.'</h4>
                    <h6>Submittions</h6>
        </div>
        <div class="col-md-1">
                    <h4>'.$id.'</h4>
                    <h6>ID</h6>
        </div>
        <div class="myBtn">                // myBtn to get the modal box
        <h4>'.$title.'</h4>
        <h6>'.$description.'</h6>
        </div>
        <div>
            <p>'.$date.'</p>
        </div>   
        </div><hr>  // end of div element

            <div class="modal myModal">     //Modal Box
            <div class="modal-content">    // Modal Box -Content
               <span class="close">&times;</span>
                 <div>
                     <div class="side-form">
                        <div class="row">
                          <div>
                          <h6>'.$date.'</h6>
                         </div>
                     </div>
                    <h3>'.$title.'</h3><hr>
                    <p>'.$description.'</p><hr>
              </div>

        <form method="get" class="submittion_from">
            <fieldset>
                <label>NO</label> 
                <label >YES</label>    
                </fieldset><br>
                <input type="text" name="id" value='.$id.'><br>
                 <fieldset>
                      <label>XYZ</label>
                            <input type="radio" name="optradio" value="NO">     
                            <input type="radio" name="optradio" value="YES">
                </fieldset><br>
                <fieldset>
                     <label>XYZ</label>
                            <input type="radio" name="optradio1" value="NO">  
                            <input type="radio" name="optradio1" value="YES">
               </fieldset><br>
               <fieldset>
                      <label>XYZ</label>
                            <input type="radio" name="optradio2" value="NO">                           
                            <input type="radio" name="optradio2" value="YES">
              </fieldset><br>
              <fieldset>
                      <label>XYZ</label>
                            <input type="radio" name="optradio3" value="NO">                          
                            <input type="radio" name="optradio3" value="YES">
             </fieldset><br>
          <a name="submit" value="Submit" type="submit" id="no" class="btn align-bottom btn-default">Submit</a>
    </form>
          </div>            


                </div>

            </div>';
          }
           ?> 

和我的Javascript来显示模式框:

        <script>
// Get the modal
var modal = document.getElementsByClassName('myModal');

// Get the button that opens the modal
var btn = document.getElementsByClassName("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close");

// When the user clicks the button, open the modal 
for(var i = 0 ; i < btn.length;i++){

    btn[i].onclick = function() {
                modal[2].style.display = "block";
}
}

for(var i = 0 ; i < span.length;i++){

    span[i].onclick = function() {
    modal[2].style.display = "none";
}
}
// When the user clicks on <span> (x), close the modal

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal[0]) {
        modal[2].style.display = "none";
    }
}
</script>

Answer 1

您遇到的问题是您无权访问为按钮生成点击事件处理程序的 for 循环中的变量 i

btn[i].onclick = function() {
            modal[2].style.display = "block";
} 

对此的一个解决方案是单独声明一个函数，并带有一个名为index的参数

    function display(index) {
            modal[index].style.display = "block";
    } 

在 foreach 循环之前的 PHP 代码中，设置 $index = 0，然后在生成按钮的循环内使用 $index 分配属性中的函数

<div class="myBtn" onclick="display('.$index.')">    
    <h4>'.$title.'</h4>
    <h6>'.$description.'</h6>
</div>
$index++;