динамические модалы, когда я нажимаю на динамические кнопки

Question

Я, я новичок здесь, поэтому я не знаю, что такое Mutch, но мне нужно разобраться в этом: у меня есть страница php с некоторыми динамическими кнопками.

Я хочу, чтобы эти динамические кнопкиоткрыть модал с динамическим контентом, но я не могу понять, почему он не работает.

Как вы можете видеть на моем тестовом сайте здесь , если вы нажмете на первую кнопку, этоотобразит модальное изображение с правильным содержанием, но если вы нажмете на вторую кнопку (динамически генерируемую), она не отобразит ничего.

вот мой код, но его проще понять по предыдущей ссылке;

<!------------------------------------------- ATTIVAZIONE MODAL--------------------------------->

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

// Get the button that opens the modal
var btn = document.getElementById("<?php echo $mq_solarium; ?>");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("chiudi_dimensione")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
    modal.style.display = "flex";
}

// 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";
    }
}
</script>
<!-------------------------------------------FINE ATTIVAZIONE MODAL--------------------------------->

.plan-wrapper {

    border: 3px solid #73AD21;
}

<div class="hero-wrapper dimensioni">
<?php
    //estraggo i valori per smart
    $query=mysqli_query($con, " SELECT * FROM appartamenti INNER JOIN moduli ON appartamenti.id_planimetria = moduli.id_planimetria  WHERE taglio='monolocale' AND visibile='1' "); 

?>

     
               
  <div id="myBtn"class="plan-wrapper">click me</div>

  <div style="background-color:DodgerBlue;" id="myModal" class="lightbox_wrapper_dimensione">
    <div id="close" class="chiudi_dimensione">X(close)</div>
    some variables from php
  </div>
</div>
 
 <?php       
}
    }
    else {
    // redirect user to another page
    header( "Location: ../index.php" ); die;
        }
?> 
 
 <!------------------------------------------- CHIUSURA PHP--------------------------------->   
  
</div>

Answer 1

В этом случае у вас есть id="myBtn" в нескольких областях.Идентификатор разработан таким образом, чтобы быть уникальным во всем документе.Поэтому, когда у вас есть document.getElementById("myBtn") и событие для этого объекта, оно будет работать только для самого первого элемента, который вы видели ранее.

Решение состоит в том, чтобы либо иметь разные уникальные идентификаторы, либо просто использовать className.

Если вы хотите с Vanilla Javascript, это решение:

var elements = document.getElementsByClassName("<?php echo $mq_solarium; ?>");
for( let i = 0; i < elements.length; i ++){
    elements[i].addEventListener("click", function(){
       modal.style.display = "flex";
    } );
}

Или с помощью Jquery

$(".<?php echo $mq_solarium; ?>").click(function(){
    modal.style.display = "flex";
});

Но убедитесь, что вы замените id="myBtn" на class="myBtn"

Answer 2

Проблема в getElementById(), она может активировать только 1 идентификатор, в то время как вы должны изменить это на какую-то другую логику щелчка и получения модальных данных или использовать этот скрипт, а также данные и генерировать различные значения идентификатора. Таким образом, вы можете иметьТолько 1 myBtn идентификатор на всю страницу, вы можете сделать что-то вроде myBtn1, myBtn2, myBtn3 ... или <div class='myBtn' data-id='1'>...content...</div> и использовать этот data-id для доступа к модальному вам нужно

ДляНапример, чтобы показать модал с помощью jquery, вы можете сделать следующее: сначала измените id на класс в каждой кнопке и добавьте data-id='number_of_item' числа, которые должны отличаться, так же, как вы должны делать с модалами, вы должны сгенерировать их с id='myModal_number_of_item' в том же foreach!После того, как вы сможете использовать приведенный ниже код, чтобы открыть модальный запрос, мне будет проще, но вы можете сделать это с помощью чистого JavaScript.

$('.myBtn').on('click', function() {
    var id = $(this).data('id');
    $('#myModal_'+id).show();
})