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

Question

我有一个 PHP for 循环，在我的 php for 循环内我有一个 html 模态框。我的 PHP for 循环从 db 中获取数据并将其回显到 div 标签中（附图片）Div List Image。每个 div 标签都有一个模态框，所以每当我点击一个 div 元素时，我都会得到一个像这样的模态框出现Modal Box。问题是无论我单击哪个 div，我都会在 Modal 框中获得相同的一个 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++;

Answer 2

您正在循环出一个包含 ID（ID 为 no）的元素。当它被循环时，您最终会在页面上出现具有相同 ID 的重复元素。这不仅仅是 invalid HTML，而是造成此问题的原因。

要解决此问题，您需要使用循环中的索引来使用增量 ID，或者最好使用类：

<a name="submit" value="Submit" type="submit" class="no"...