モーダル画像は1つの画像にのみ作用します

Question

私のモーダル画像は私のページ上の最初の画像にしか作用しません。アレイ内のすべてではありません。

スクリプト、CSS、HTML、サイトへのリンクが添付されています。

http://jarrettonions.co.za/

<?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ファイルを呼び出すための画像助けてくれてありがとう

ディラン

<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とスクリプトを含む

Answer 1

同じIDを複数回持つことは、W3C仕様では有効ではありません。

jQueryは、そのIDを持つ最初の要素のみを返すdocument.getElementByIdメソッドを使用します。

同じIDで同じページに2つの要素を置くべきではありません。必要な場合は代わりに 'クラス'を使用してください。

ちょうど

あなたのimgタグに代わり「ID」の「クラス」を取り、あなたのJavaScriptで代わりのdocument.getElementByIdのdocument.getElementsByClassNameを使用しています。

ご希望の場合はお手数ですが、