Question

我想了解为什么我的模态图像仅适用于我页面上的第一张图像。而不是阵列中的所有人。

我附上了脚本，CSS和HTML以及指向该网站的链接。

http://jarrettonions.co.za/

感谢您的帮助

迪伦

<script>
    var modal = document.getElementById('myModal');
    var img = document.getElementById("myImg");
    var modalImg = document.getElementById("img01");
    var captionText = document.getElementById("caption");
    img.onclick = function(){
        modal.style.display = "block";
        modalImg.src = this.src;
        modalImg.alt = this.alt;
        captionText.innerHTML = this.alt;
    }
    var span = document.getElementsByClassName("close")[0];

    span.onclick = function() {
        modal.style.display = "none";
    }
</script>

图像的Html

<?php
    require 'connect.php';
    $sql = "SELECT * FROM art ORDER BY hits DESC";
    $result = $conn->query($sql);
    if ($result->num_rows > 0) {
        // output data of each row
        while($row = $result->fetch_assoc()) {
                echo 
                    "<div class='art'>

                    <img id='myImg' src='img/".$row["name"]."_tnail.jpg' alt='".$row["name"]." &nbsp; • &nbsp; ".$row["year"]."&nbsp; • &nbsp;".$row["type"]."' title='".$row["name"]." • ".$row["year"]." • ".$row["type"]."' height='auto' width='100%'/>
                            <div id='myModal' class='modal'>
                        <span class='close'>×</span>
                        <img class='modal-content' id='img01'>
                    <div id='caption'></div>
                    </div>
             </div>"

                   ;
        }
    } else {
        echo "0 results";
    }
    $conn->close();
    ?>

然后对于索引页面，它只调用art.php文件并包含脚本

Answer 1

根据W3C规范，多次使用相同的ID是无效的。

jQuery使用document.getElementById方法，该方法仅返回具有该ID的第一个元素。

因此，您不应该在具有相同ID的同一页面上拥有两个元素。如果需要，请使用“课程”。

只需在你的img标签中使用'class'而不是'id'

并在您的javascript中使用document.getElementsByClassName而不是document.getElementById。

希望它会对你有所帮助。

模态图像仅适用于1张图像

1 个答案: