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和数据，将这些属性添加到图像标记中。现在我正在尝试这个，我只得到未定义。我使用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），然后找到第一个变体：

<强> 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);
});

如何将属性添加到img标记以在ajax调用中使用

1 个答案: