Загрузить данные из 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"; 
     } 
    }; 
} 

Эти 3 функции возвращают новую функцию, которую мы должны использовать, а также каждая из функций захватываются модальность в их области.

Вы можете использовать что-то, как показано ниже:

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 или другую библиотеку/пакет обработки событий.