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

我有多个与图像相同的结构div。现在我正在尝试获取被点击图像的src

我有多个div，结构如下：

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

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

但这只给出了第一个图像的src，而不是每个图像

我是新的前端开发，我将感谢任何帮助

document.querySelectorAll（'.model'）.forEach（函数（项）{
item.addEventListener（'单击'，函数（））{
modal.style.display=“块”；
captionText.innerHTML=document.getElementById（“image”）.src；
});
});

">
试试这个：

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

如果您有Jquery，这将起作用。如果没有，请将此脚本添加到HTML中：

我尝试查看是否可以在项上运行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;
    });
});


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

querySelector
的工作原理类似于您可能习惯于使用css


element.querySelector（“img”）
选择带有标记的第一个元素


图1

图2

图3

图4

您可以检索
img
src，如下所示：


$（文档）.on（'click'，'modal'，函数（事件）
{
log（$（this.find（'img'）.attr（'src”）；
})；

图1

图2

图3

图4

如果所有元素都有id“image”，则很明显。id是唯一的。除此之外，clickEvent在“Event.target”和“Event.target”中都有一个“Event”参数“是源元素。你应该使用that@Ren但它只给出了第一张图片的src，而不是我点击的图片on@RenéDatenschutz如何使用Event.targetAn id获取图像的src应该是唯一的。document.getElementById（）根据设计只返回一个元素。请参阅：。“文档方法getElementById（）返回元素对象，该对象表示id属性与指定字符串匹配的元素。由于元素id在指定时必须是唯一的，因此它们是快速访问特定元素的有用方法。如果需要访问没有id的元素，可以使用querySelector（）他正在向他的div添加click，为什么要在这里更改上下文，以及这是如何被升级的，显然这不是jquery的问题
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;
    });
});