Question

我，我是新来的，所以我并不十分了解mutch，但是我需要弄清楚这件事：我有一个带有一些动态按钮的php页面。

我希望这些动态按钮打开具有动态内容的模式，但我不知道为什么它不起作用。

从我的测试站点here可以看到，如果单击第一个按钮，它将显示具有正确内容的模态，但是如果单击第二个按钮（通常是生成的），则不会显示随便吧。

这是我的代码，但是通过上一个链接来理解更简单；

<!------------------------------------------- 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"。该ID旨在在整个文档中是唯一的。因此，当您拥有document.getElementById("myBtn")和该对象的事件时，它将仅对您之前遇到的第一个元素起作用。

解决方案是使用不同的唯一ID或仅使用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个id，您应该将其更改为单击和获取模态数据的另一种逻辑，或者将这个脚本以及数据分别传递给其他逻辑并生成不同的id值因此，您在整个页面上只能有1个myBtn ID，您可以制作类似myBtn1，myBtn2，myBtn3的内容... 要么 <div class='myBtn' data-id='1'>...content...</div> 并使用此data-id来访问所需的模式

例如，使用jquery显示模式，您可以这样做首先，在每个按钮中将id更改为class，并添加data-id='number_of_item'数字，这与使用模态应该做的相同，应该使用id='myModal_number_of_item'在相同的foreach中生成它们！在您可以使用下面的代码通过查询打开模态后，它对我来说比较容易，但是您可以使用纯JavaScript来实现。

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

当我单击动态按钮时的动态模态

2 个答案: