Question

我有3张图片，每张图片都有相同的ID /类（我都尝试过），并且在单击时我想获取我点击的图片的src，相反，我获得了第一张图片的src

我尝试使用Id，Class，img元素，this。似乎没有任何作用

该元素的父代中有更多代码，但所有代码都是为了出现

HTML


<img src="_IMAGE_SRC_" class="card-img-top img-fluid webImg"/>
<img src="_IMAGE_SRC_" class="card-img-top img-fluid webImg"/>
<img src="_IMAGE_SRC_" class="card-img-top img-fluid webImg"/>

JavaScript

$('.webImg').on('click', () =>{
    let imgSrc = $(".webImg").attr('src')

    console.log(imgSrc);

})

我有多张图片，我想获取图片src，以便在单击它时出现一个模型，然后使用变量在模态内填充图片

Answer 1

$('.webImg').on('click', (e) => {
    console.log(
        e.target.src, //property access
        e.target.getAttribute('src'), //attribute access
        $(e.target).prop('src'), //jQuery property access
        $(e.target).attr('src') //jQuery attribute access
    );
})

您可以传递事件，并使用属性或getAttribute方法从目标中获取src。

Answer 2

问题在于，此行let imgSrc = $(".webImg").attr('src')重新查询.webImg元素的DOM，而完全忽略了被单击的元素。要找出单击了哪个元素，请使用传入的Event Object，或仅使用this，它等于当前元素。

$('.webImg').on('click', function(e) {
    let imgSrc = $(e.target).attr('src')
    //or
    //let imgSrc = $(this).attr('src')

    console.log(imgSrc);

})

@Taplar指出，要使用this选项，您必须从箭头功能更改为常规功能。

您肯定要使用与id相对的类，因为id应该是唯一的，并且页面上的多个元素不应具有相同的id。尝试使用JavaScript抓取元素时，这可能会导致问题。

Answer 3

$('.webImg').on('click', function(){
    let imgSrc = $(this).attr('src');
    alert(imgSrc);
});

如果要在此函数之外使用imgSrc，请像let imgSrc = false;之前声明它

如何在点击时获取图片src

3 个答案: