如何將屬性添加到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); 
});