将数据从PHP查询加载到Modal

您好，我有一个模式，我想动态加载从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";
    }
}

---

这有什么不对的

再次加载脚本文件时，它将覆盖多个变量，如modal、btn、span。运行此页面后，将为modal分配最后一个modal元素。这使得每个btn.onclick和span.onclick尝试更改最后一个模态元素

如果您在全局范围内使用var，那么所有问题都会迎刃而解。在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或其他事件处理库/包处理更经济的事件。

ok。。。我已经把我的问题的简化版本放在这里了，我需要在我的模型中加入一个滑块。。滑块将从php接收的每行数据中获得6个图像，同时循环。。。你能指导我吗，我正在使用jssor循环，请看这个。。。这里的代码在没有模态的情况下运行良好，嘿，你的答案正在运行。。。唯一的问题是第二个函数应该是none。。。要关闭窗口。。。仍然在试图弄清楚如果在模式之外的任何地方单击，如何关闭。。。有什么更好的方法可以做到这一点。。。ajax调用。。我认为当数据已经存在于查询中时，ajax调用会给服务器带来不必要的负载。。。你怎么看…@DragonFire general modal看起来很简单，但他们需要做一些事情，比如关闭动作。大多数事情都需要样式表和良好格式的html结构以实现可重用性。也许你可以找到一些创建模态的教程。简单的方法是grep提供一些很酷的模式库，如果可以的话。你认为应该这样做吗