如何为每个具有相同结构的 div 获取图像 src？答案

【问题标题】：How to get image src for each div with same structure?如何为每个具有相同结构的 div 获取图像 src？
【发布时间】：2019-06-05 20:02:10
【问题描述】：

我有多个带有图像的相同结构 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，而不是为每张图片。

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

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>

【问题讨论】：

如果所有元素都有 id "image"，那就很清楚了。 ID 是唯一的。除此之外，clickEvent 在“Event.target”中和“Event.target”中有一个“Event”参数是源元素。你应该使用那个
@RenéDatenschutz 但它只提供第一张图片的 src 而不是我点击的图片
@RenéDatenschutz 如何使用 Event.target 获取图像的 src
ID 应该是唯一的。 document.getElementById() 按照设计只返回一个元素。请参阅：developer.mozilla.org/en-US/docs/Web/API/Document/…。 “Document 方法 getElementById() 返回一个 Element 对象，该对象表示其 id 属性与指定字符串匹配的元素。由于元素 ID 在指定时必须是唯一的，因此它们是快速访问特定元素的有用方法。如果您需要访问没有 ID 的元素，您可以使用 querySelector() 使用任何选择器查找元素。"

标签： javascript html dom ejs

【解决方案1】：

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

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>

【讨论】：

【解决方案2】：

试试这个：

$("img").click(function(){
   captionText.innerHTML = $(this).attr('src');
});

如果您有 Jquery，这将起作用。如果不这样做，请将此脚本添加到您的 HTML：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

【讨论】：

他正在向他的 div 添加点击，为什么你要在这里更改上下文？，以及这是如何获得投票的，显然这不是 jquery 问题

【解决方案3】：

您可以按如下方式检索img src：

$(document).on('click', '.modal', function(event)
{
    console.log($(this).find('img').attr("src"));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal">
  <img src="src1.jpg" alt="im1">
  <p>Image 1</p>
</div>

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

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

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

【讨论】：

【解决方案4】：

我尝试查看是否可以在 item 上运行 getElementById，但它没有这样的功能。它确实有 getElementsByTagName，因此您可以引用 item 内的 img 元素

let captionText = document.getElementById('captionText')

document.querySelectorAll('.model').forEach(function(item) {
    let currentSrc = item.getElementsByTagName('img').item(0).src
    item.addEventListener('click', function(x) {
        captionText.innerHTML = currentSrc;
    });
});

【讨论】：