javascript - 使用 PHP 更改 javascript id 以匹配 Modal CSS

Question

我有一个 css 模态，用于单击从 http://www.w3schools.com/howto/howto_css_modal_images.asp 获得的图像缩放。我正在运行一个 while 循环，我从数据库中获取所需的所有图像。我想让它与这个模态 css 一起工作。我已经设置了一个变量 count 和 increment 作为 count++ 并将它放在 HTML 部分。但是 javascript 在 while 循环之外。我怎样才能在那里使用它来使其工作？

带有 while 循环的 HTML 部分

<?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 放在页脚

<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>

请大家帮帮我!

Answer 1

您正在 HTML 中搜索#myImg，但此 ID 不存在。相反，你有，fe。 #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>

一些附加信息:只需使用一个模态标记。

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>