javascript - 为图像模式选择多个元素

Question

我想使用选择器选择页面上的每个图像以放入模式中，而无需为每个图像重写整个脚本。我觉得这是一个愚蠢的问题，但我一直在尝试不同的事情。现在我正在使用 var img = document.getElementById("article01");选择一张图像，因为这就是 getElementById 所能做的。因此，我想选择列出的两个图像，这样我就不会为每个图像重写整个脚本，因为页面上还会有更多图像。我尝试使用 getelementbyclass 和 tagname 但我认为我被困住了。

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 = ...
  });

这里是 CodePen 的链接显示如何执行此操作的演示...