PHPでjavascript idをModal CSSに変更する

Question

http://www.w3schools.com/howto/howto_css_modal_images.aspから取得した画像を拡大するCSSモーダルがあります。私はデータベースから必要なすべてのイメージを取得しているwhileループを実行しています。私はそれをこのモーダルCSSで動作させたいです。インクリメント付きの変数カウントをcount++と設定し、HTML部分に配置しました。しかし、JavaScriptはwhileループの外にあります。どのように私はそれを動作させるためにそれを使用することができますか？

HTML部分とフッター

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

に配置されたループ

<?php while($faf = $prooq->fetch()){ extract($faf); $count++; ?> 
     <div class="image-container"> <img id="myImg<?php echo $count; ?>" src="proofs/<?php echo $pr_image; ?>" alt="" width="230" height="150"> 
      <div id="myModal" class="modal"> <span class="close" onclick="document.getElementById('myModal').style.display='none'">&times;</span> <img class="modal-content" id="img<?php echo $count; ?>"> 
      <div id="caption"></div> 
      </div> 
      <div class="image-text">shreyansh ($8.75)</div> 
     </div> 
     <?php } ?> 

Javascriptが私の人を助けてくださいながら！

Answer 1

あなたのHTMLで#myImgを検索していますが、このIDは存在しません。代わりに、あなたは持っています。 ＃myImg1。

マークアップのクラス（私の例では「myThumb」）を使用して、その要素にイベントを添付する方が良いです。

HTML：

<div class="image-container"> 
    <img class="myThumb" id="myImg1" src="http://lorempixel.com/400/200/sports/1/" alt="" width="230" height="150"> 
    <div class="image-text">shreyansh ($8.75)</div> 
</div> 
<div class="image-container"> 
    <img class="myThumb" id="myImg2" src="http://lorempixel.com/400/200/sports/2" alt="" width="230" height="150"> 
    <div class="image-text">shreyansh ($8.75)</div> 
</div> 
<div class="image-container"> 
    <img class="myThumb" id="myImg3" src="http://lorempixel.com/400/200/sports/3/" alt="" width="230" height="150"> 
    <div class="image-text">shreyansh ($8.75)</div> 
</div> 

<div id="myModal" class="modal"> 
    <span class="close">&times;</span> 
    <img class="modal-content" id="modalImg"> 
    <div id="caption"></div> 
</div> 

いくつかの追加情報：ちょうど1つのモーダルマークアップを使用しています。

Javascriptを：

<script> 
    var modal = document.getElementById('myModal'); 
    var img = document.getElementById('myImg'); 
    var modalImg = document.getElementById("modalImg"); 
    var captionText = document.getElementById("caption"); 

    var span = document.getElementsByClassName("close")[0]; 
    span.onclick = function() { 
     modal.style.display = "none"; 
    } 

    var thumbs = document.getElementsByClassName("myThumb"); 

    for (var i = 0; i < thumbs.length; i++) { 
     thumbs[i].addEventListener('click', function(){ 
      modal.style.display = "block"; 
      modalImg.src = this.src; 
      captionText.innerHTML = this.alt; 
      console.log(modalImg); 
     }, false); 
    } 
</script>