Question

我目前有一个像这样的div列表：

<div class="product_container">
   <img src="img1.jpg">
   <div id="add_product_img"></div>
</div>

当用户点击ID为add_product_img的div时，此功能会运行

$('#add_product_img').click(function(){
    addImg()
});

function addImg(){
    var img = $('#multiple_product_featured_image').find('img').attr('src');
});

我需要的是只有function addImg() seletc被点击的<div id="add_product_img"></div>的img属性，而不是任何其他div。

我正在考虑使用.this（）选择器，但我不确定应该如何应用它。

由于

Answer 1

首先应该只有一个具有给定id的类，因此使用class属性对相似的元素进行分组

<div class="product_container">
   <img src="img1.jpg">
   <div class="add_product_img"></div>
</div>

然后将点击的元素引用作为参数传递给addImg方法，然后使用prev()方法和点击的元素引用来查找目标img元素

$('.add_product_img').click(function(){
    addImg(this)
});

function addImg(el){
    var img = $(el).prev('img').attr('src');
});

Answer 2

div将在this事件处理程序触发的匿名函数范围内分配给click。将this传递给addImg函数，然后遍历回父级并选择img。

$('#add_product_img').click(function(){
    addImg(this)
});

function addImg(elem){
   var img = $(elem).parent().find("img").attr('src');
});

我建议遍历父级以防止标记更改时可能出现的任何问题。

jQuery DOM只选择当前的DIV类

2 个答案: