javascript - 如何获取具有相同结构的每个div的图像src？

Question

我有多个带有图像的相同结构的 div。现在我试图获取被单击的图像的 src。

我有多个结构如下的 div:

<div id="modal" class="model">
    <img id="image" src= "<%= loop.url %>">

    <div class="container">
        <%- loop.title %>
    </div>
</div>

我正在尝试获取被单击的 div 图像的 src。我正在尝试以下代码:

document.querySelectorAll('.model').forEach(function(item) {
        item.addEventListener('click', function() {
            modal.style.display = "block";
            captionText.innerHTML = document.getElementById("image").src;
        });
    });

但这仅给出了所有图像的第一张图像的 src，而不是每个图像的 src。

我是前端开发的新手，如果有任何帮助，我将不胜感激。

document.querySelectorAll('.model').forEach(function(item) {
        item.addEventListener('click', function() {
            modal.style.display = "block";
            captionText.innerHTML = document.getElementById("image").src;
        });
    });

<div id="modal" class="model">
    <img id="image" src= "<%= loop.url %>">

    <div class="container">
        <%- loop.title %>
    </div>
</div>

Answer 1

您可以使用querySelector检索第一个 img .modal 中的元素分区。

querySelector就像您可能习惯的 css 一样工作。例如

• element.querySelector("img")选择第一个标签 <img>
• element.querySelector(".someclass")选择第一个有类的
• element.querySelector("#someid")选择具有 id 的元素

document
  .querySelectorAll(".modal")
  .forEach(
    el => el.addEventListener(
      "click",
      event => {
        const img = el.querySelector("img");
        if (img) console.log(img.src);
      }
    )
  );

<div class="modal">
  <img src="src1.jpg">
  <p>Image 1</p>
</div>

<div class="modal">
  <img src="src2.jpg">
  <p>Image 2</p>
</div>

<div class="modal">
  <img src="src3.jpg">
  <p>Image 3</p>
</div>

<div class="modal">
  <img src="src4.jpg">
  <p>Image 4</p>
</div>