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 div中的第一个.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>

Answer 2

您可以按以下方式检索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>

Answer 3

尝试一下：

$("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>

Answer 4

我试图查看是否可以在项目上运行getElementById，但是它没有这样的功能。它确实具有getElementsByTagName，因此您可以引用项目中的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;
    });
});

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

4 个答案: