Select 图像模态的多个元素

Question

我想使用 selector to select 页面上的每个图像来放入模态，而无需为每个图像重写整个脚本。我觉得这是一个愚蠢的问题，但我一直在尝试不同的事情。现在我正在使用 var img = document.getElementById("article01");到 select 一张图片，因为这是您使用 getElementById 所能做的全部。所以我想 select 列出的两个图像，这样我就不会为每个图像重写整个脚本，因为页面上会有更多图像。我尝试使用 getelementbyclass 和标记名，但我想我被卡住了。

HTML:

<!-- Trigger the Modal -->
    <img id="article01" src="/images/article1.PNG" alt="" style="width:100%;max-width:300px">
    <img id="article01-2" src="/images/article1-2.PNG" alt="" style="width:100%;max-width:300px">
<!-- The Modal -->
    <div id="modal1" class="modal">

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

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

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

Javascript:

    <script>
    // Get the modal
    var modal = document.getElementById("modal1");

    *var img = document.getElementById("article01");*
    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

您可以使用 document.querySelectorAll() 获取所有图像的 nodeList。例如，如果您这样创建图像列表：

<img class="selectable" src="article-1" />
<img class="selectable" src="article-2" />
<img class="selectable" src="article-2" />

您可以使用 ...

为每个添加一个事件侦听器

document.querySelectorAll('img.selectable')
  .forEach((img) => {
    img.addEventListener('click', (e) => showModal(e.target)); //or use img.onclick = ...
  });

这是一个 link 到 CodePen 的演示，展示了如何执行此操作...

Answer 2

这是我从您的 post 那里得到的信息。我想你要找的是 document.querySelector()

<!-- Trigger the Modal -->
<img alt="this is a caption" src="https://livebrooks.com/wp-content/uploads/2017/07/fpo.gif" style="width:100%;max-width:300px">
<img alt="this is the second caption" src="https://livebrooks.com/wp-content/uploads/2017/07/fpo.gif" style="width:100%;max-width:300px">
<!-- The Modal -->
<div id="modalWrap" class="modal">
  <!-- The Close Button -->
  <span class="close" onclick="document.querySelector('#modalWrap').remove()">&times;</span>

</div>

for (var i of document.querySelectorAll("img")) {
  makeModal(i.src, i.getAttribute("alt"));
}


function makeModal(src, caption) {
  //modal wrap
  var modalWrap = document.querySelector("#modalWrap");
  //img
  var imgElement = document.createElement("img");
  imgElement.src = src;
  imgElement.style.maxWidth = "300px";
  //caption
  var captionElement = document.createElement("p");
  captionElement.innerText = caption;

  //adding elements to modalWrap
  modalWrap.appendChild(imgElement);
  modalWrap.appendChild(captionElement);

}

Select 图像模态的多个元素

Select Multiple Elements for Image Modal

javascript

modal-dialog

getelementbyid

selector