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或其他事件处理库/包来处理更实惠的事件。

将PHP查询中的数据加载到Modal中

1 个答案: