javascript和php中Id为动态时传递Id获取元素

Question

我有这个示例应用程序，其中从数据库中获取的小缩略图显示在屏幕上。

要求：当点击缩略图时，它应该以模式打开为大图像，弹出时每个图像应该有自己的下载按钮。

问题 - PHP 运行很好，我可以在点击时打开图像，但我对如何为每个图像实现下载按钮没有任何清晰的想法。

注意 - 我总是使用准备好的语句，但这只是一个示例，所以我没有使用任何特殊的东西。

这是我的代码：

<?php   while($row = mysqli_fetch_assoc($result)){?>
    
    <img id="<?php echo $row['id'] ?>" src="<?php echo $row['img_name'] ?>" alt="">

<?php } ?>
<div id="myModal" class="modal">

  <!-- The Close Button -->
  <span class="close">&times;</span>

  <!-- Modal Content (The Image) -->
  <img class="modal-content" id="img">

  <!-- Modal Caption (Image Text) -->
  <div id="caption"></div>
</div>

这是我的java脚本

    // Get the modal
let images = document.querySelectorAll(".imgwrap > img");

var modal = document.getElementById("myModal");
for(i=0; i<images.length; i++){
  let img = images[i];
  
  // Get the image and insert it inside the modal - use its "alt" text as a caption
  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;
}
}
// 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";
}

Answer 1

要在模式中显示图像，您必须为每个缩略图添加事件侦听器。这样你就可以在模式上显示它们，或者在点击它时做任何你想做的事情。我在这里 Codepen 创建了一个工作演示。请检查一下。

HTML

<div class="images-wrapper">
  <?php while($row = mysqli_fetch_assoc($result)){?>
    
    <img class="gallery-img" id="<?php echo $row['id'] ?>" src="<?php echo $row['img_name'] ?>" alt="">

    <?php } ?>
</div>

<div class="modal" id="myModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body" id="modal-body">
      </div>
      <div class="modal-footer">
        <button type="button" id="close-modal" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

JS

//select all thumbnails on the page generated by php
let images = document.querySelectorAll(".images-wrapper > img")

//loop over all the images and bind an eventlistener on click to each images 
for(i=0; i<images.length; i++){
  let img = images[i]
  img.addEventListener('click', showModal, false)
}

let modal = document.querySelector("#myModal")

function showModal(){
  
  //display mdodal
  modal.style.display = 'block'
  
  //select modal body element
  let modalBody = document.querySelector("#modal-body")
  
  //clear previously displayed image
  modalBody.innerHTML = ""
  
  //create an image element 
  let modalImg = document.createElement('img')
  modalImg.src = this.getAttribute('src')
  
  //create download btn
  let downloadBtn = document.createElement('a')
  // Create the text node
  let link = document.createTextNode("Download Image");
  downloadBtn.appendChild(link); 
  downloadBtn.href = this.getAttribute('src')
  downloadBtn.download = 'download'
  
  // add download btn 
  modalBody.prepend(downloadBtn)
  
  // add image element to modal body
  modalBody.appendChild(modalImg);
  
}

let closeBtn = document.querySelector("#close-modal")
closeBtn.addEventListener('click', closeModal, false)

//close modal
function closeModal(){
  modal.style.display = 'none'
}

javascript和php中Id为动态时传递Id获取元素

Passing the Id to get the element when Id is dynamic in javascript and php

javascript

php