为什么bootstrap模态仅适用于一个项目

Question

下面是我写的用于显示数据库中的图像的代码，当我点击图像显示为模态我从这个目标编写代码但是当我运行代码时它只适用于最后一项请告诉我任何想法或解决方案

Bootstrap和PHP

<?php
    $stmt = $DB_con->prepare('SELECT ID, title, content, img FROM shop where lang="en" ORDER BY ID DESC');
    $stmt->execute();
    if($stmt->rowCount() > 0)
    {
        while($row=$stmt->fetch(PDO::FETCH_ASSOC))
        {
            extract($row);
?>
            <img id="myImg" src="admin/view/pages/en/shop/user_images/<?php echo $row['img']; ?>" alt="<?php echo $content; ?>" width="300" height="200">
<?php
        }
    }
?>
<!-- The Modal -->
<div id="myModal" class="modal">
    <span class="close">&times;</span>
    <img class="modal-content" id="img01">
    <div id="caption"></div>
</div>

的JavaScript

<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;
        captionText.innerHTML = this.alt;
    }
    //Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];
    //When the user clicks on <span> (x), close the modal
    span.onclick = function() { 
        modal.style.display = "none";
    }
</script>

Answer 1

您的图片需要具有唯一ID。我建议你创建所有图像的父div。见下文

<div id="parent_modal">
<?php
    $stmt = $DB_con->prepare('SELECT ID, title, content, img FROM shop where lang="en" ORDER BY ID DESC');
    $stmt->execute();
    if($stmt->rowCount() > 0)
    {
        while($row=$stmt->fetch(PDO::FETCH_ASSOC))
        {
            extract($row);
?>
            <img id="myImg<?php echo $row['id']; ?>" src="admin/view/pages/en/shop/user_images/<?php echo $row['img']; ?>" alt="<?php echo $content; ?>" width="300" height="200">
<?php
        }
    }
?>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
    <span class="close">&times;</span>
    <img class="modal-content" id="img01">
    <div id="caption"></div>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
 <span class="close">&times;</span>
 <img class="modal-content" id="img01">
 <div id="caption"></div>
</div>

然后在javascript中选择新div的所有子项并检测它们上的onlcick事件。现在无法测试，但应该稍作调整：

<script>
var modal = document.getElementById('myModal');
var img = document.getElementById('parent_modal').childNodes;
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for(var i=0; i<img.length; i++) {
    img[i].onclick = function() {
     modal.style.display = "block";
     modalImg.src = this.src;
     captionText.innerHTML = this.alt;
    }
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() { 
modal.style.display = "none";
}
</script>

如果它现在可以工作，就无法测试它，但这是我理解它应该完成的方式。可能是错的