爲什麼bootstrap模式只適用於一個項目

Question

下面是我寫的數據庫中顯示圖像的代碼當我點擊圖像顯示爲模式時我從這個目標寫代碼，但是當我運行代碼時它只能用於最後一項請建議我任何想法或解決方案

引導和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 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> 

不能對此進行測試，如果它的作品的權利，但我是這樣理解它應該做的事。可能是錯誤的，但