从PHP查询加载数据到Modal

Question

嗨我有一个模式，我想动态加载从while循环接收的数据，我分配ID，但模式只显示最后一行数据（图像）。

这是我的PHP

<script> 
var slider_counter2 = 0; 

</script> 
<?php 
     $slide_counter1=0; 
     while($data=$select->fetch()){ 
     $slide_counter1++; 
     ?> 
<script> 
slider_counter2++; 

</script> 

<!-- The Modal --> 
<div id="myModal_<?php echo $slide_counter1;?>" class="modal"> 
    <!-- Modal content --> 

    <div class="modal-content"> 
     <span class="close" id="modal_close_btn_<?php echo $slide_counter1;?>">&times;</span> 
     <div class="modal-body"> 

      <img class="propertylistboximgfilled" src="../images/user/final_<?php echo $data['property_image1'];?>"> 

     </div> 
    </div> 
</div> 

<script type="text/javascript" src="../js/modal.js"></script> 

<?php } ?> 

这是我的javascript

var modal = document.getElementById('myModal_'+slider_counter2); 

// Get the button that opens the modal 
var btn = document.getElementById('modalopener_'+slider_counter2); 

// Get the <span> element that closes the modal 
var span = document.getElementById('modal_close_btn_'+slider_counter2); 

// 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"; 
} 

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

可能是错误在这个....

Answer 1

当您再次加载脚本文件，它会覆盖几个变量，如modal,btn,span。运行此页面后，modal将被分配最后一个模态元素。这使得每个btn.onclick和span.onclick都尝试更改最后一个模态元素。

如果在全球范围内使用var something，则会造成所有问题。在JS中，它可以解决各种技术，如范围，封闭，IIFE。 （每个关键字，如果你想使用JS很重要。）

function btn_onclick(modal) { 
    return function() { 
     modal.style.display = "block"; 
    }; 
} 

function span_onclick(modal) { 
    return function() { 
     modal.style.display = "none"; 
    }; 
} 

function window_onclick(modal) { 
    return function(event) { 
     if (event.target == modal) { 
      modal.style.display = "block"; 
     } 
    }; 
} 

这三个函数返回的新功能，我们需要使用同时，各职能被捕获在其范围模式。

您可以使用类似如下：

var modal = document.getElementById('myModal_'+slider_counter2); 
var btn = document.getElementById('modalopener_'+slider_counter2); 
var span = document.getElementById('modal_close_btn_'+slider_counter2); 

btn.onclick = btn_onclick(modal); 
span.onclick = span_onclick(modal); 
window.onclick = window_onclick(modal); 

这是工作的代码，但不是一个好的解决方案，因为它是一个重复的代码。您可以使用jQuery或其他事件处理库/包来处理更便宜的事件。