從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或其他事件處理庫/包來處理更便宜的事件。