如何將屬性添加到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和其第一個變量中的數據，並將這些屬性添加到image標簽。 現在，我正在嘗試此操作，但只得到未定義的內容。 我正在使用undefined從當前值中清除那些變量。

$(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 ），然后從那里找到第一個變體：

演示

$(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);
});