动态模态框：当我点击动态按钮时

Question

我是新来的，所以不太了解，但我需要解决这个问题：我有一个包含一些动态按钮的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>

- Stefano Zanetti

Answer 1

在这种情况下，您在多个区域中具有id="myBtn"。ID设计为在整个文档中是唯一的。

因此，当您有document.getElementById("myBtn")和该对象的事件时，它将仅对第一个元素起作用，就像您之前遇到的那样。

解决方案要么是具有不同的唯一ID，要么只使用类名。

如果您想使用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"

- n1md7

---

嗨，哈利，我现在明白了。 现在，如果您检查我的链接，您会发现模态框都具有不同和唯一的ID，但现在任何按钮（我已将整个动态区域更改为按钮）都无法工作...我快疯了...:( - Stefano Zanetti

你的代码在jquery定义之前。所以，不要使用$(".myBtn").click(function(){ modal.style.display = "flex"; });，而是使用$(document).ready(function(){$(".myBtn").click(function(){ modal.style.display = "flex"; });});。 附言 请确保在你的代码之前包含了jquery。 - n1md7

请将以下代码行翻译成中文：只需将此行 <script src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> 放置在您其他脚本的顶部即可。 - Oleksandr Pobuta

谢谢！它奏效了！但我又有一个问题...当我点击时，它会出现模态框，但不是正确的信息...它总是显示最后一个按钮的内容（如果你比较“价格”就可以看到)...你能帮我最后一次吗？谢谢 :( - Stefano Zanetti

@Stefano Zanetti，为此，您应该指定您正在尝试访问的模态框，请尝试使用我的代码与 data-id 并从表中获取此 id 或提供更多的 PHP 代码以说明您在查询后如何获取数据。 - Oleksandr Pobuta

@StefanoZanetti 我看到你正在使用 id="myModal_" 并添加一个数字，这些数字看起来像是从你的数据库中获取的ID。尝试从0开始逐个增加数字。你应该得到像 myModal_0、myModal_1、myModal_2 等这样的ID。然后在jquery中，你可以稍微修改一下你的点击函数。$(document).ready(function(){ $(".myBtn").each(function(index){ $(this).click(function(){ $("#myModal_"+index).css("display","flex"); }); }); }); 如果你像这样分配点击事件，它将匹配服务器生成的ID，并且你将获得所需的结果。 - n1md7

Answer 2

问题出在getElementById()，它只能触发一个ID，你应该改变这个逻辑，点击并获取模态框数据或循环此脚本以及数据并生成不同的ID值。因此，在整个页面上，您只能拥有1个myBtn ID，可以创建像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();
})

- Oleksandr Pobuta

---

嗨@olexander，我已经理解了问题。你能建议我使用什么逻辑吗？我真的很新手，我的老板给了我这个复杂的工作要做...另一个问题：所以我必须生成动态数据ID吗？ - Stefano Zanetti

每个按钮都应该有唯一的值，以便访问正确的模态窗口，因此是需要动态生成的。 - Oleksandr Pobuta

@Stefano Zanetti，你是自己完成的，我只是想指出正确的方向，祝你玩得开心 :) - Oleksandr Pobuta