如何将属性添加到img标签以用于ajax调用

Question

这是我的代码。这是不能改变的，我必须按照现有的结构进行工作。

<div class="container"> 
<div class="contain_box"> 
    <a href="something"> 
     <img class="my_img" src="some_image"> 
    </a> 
    <div class="variants"> 
     <div class="var" rel="123" data="321"></div> 
     <div class="var" rel="1234" data="4321"></div> 
    </div> 
</div> 
<div class="contain_box"> 
    <a href="something"> 
     <img class="my_img" src="some_image"> 
    </a> 
    <div class="variants"> 
     <div class="var" rel="456" data="654"></div> 
     <div class="var" rel="4567" data="7654"></div> 
    </div> 
</div> 
<div class="contain_box"> 
    <a href="something"> 
     <img class="my_img" src="some_image"> 
    </a> 
    <div class="variants"> 
     <div class="var" rel="789" data="987"></div> 
     <div class="var" rel="7890" data="0987"></div> 
    </div> 
</div> 
</div> 

我需要的是，当我点击它会拉rel和从它的第一变体数据的一个图像，这些属性添加到图像标签。现在我正在尝试这个，我只得到未定义的。我正在使用未定义从当前值中清除这些变量。

$(document).on("click", '.my_img', function(e){ 
    e.preventDefault(); 

    data = undefined; 
    rel = undefined; 

    var new_rel = $('.var').attr('rel'); 
    var new_data = $('.var').attr('data'); 

    $('.my_img').attr('rel', new_rel); 
    $('.my_img').attr('data', new_data); 

    data = $(this).attr('variant'); 
    rel = $(this).attr('rel'); 
} 

任何见解或帮助将会很棒！提前致谢！

Answer 1

找到父容器（.contain_box）相对于所述点击图像，则第一变体从那里：

Demo

$(document).on("click", '.my_img', function(e){ 
    e.preventDefault(); 

    var firstVariant = $(this).closest('.contain_box').find('.var').first(); 
    data = firstVariant.attr('rel'); 
    rel = firstVariant.attr('data'); 

    $(this).attr({ 
     data : data, 
     rel : rel 
    }); 

    console.log(data); 
    console.log(rel); 
});