单击时将图像逐个添加到元素中

时间:2014-06-14 17:25:17

标签: javascript jquery html selector

这是fiddle example

如何在点击时将.area中的div元素逐个添加到div元素中?无论先点击什么图像,我都希望它占据第一个div(leftest),然后下一个点击的图像将转到第二个div。

Jquery的:

$('.compare').click(function(){
  var getimage = $(this).closest('.box').find('img').attr('src');
  $('#area > div').html('<img src="'+getimage+'"/>') 

});

$(document).on('click','#area > div > img',function(){
  $(this).remove();
}); 

HTML:

<div class="box">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/5d/Crystal_Clear_action_run.png/40px-Crystal_Clear_action_run.png"/>
<input class="compare" type="radio"/>
</div>

<div class="box">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/9/99/Question_book-new.svg/50px-Question_book-new.svg.png"/>
<input class="compare" type="radio"/>
</div>

<div id="area"><div></div><div></div><div></div></div>

1 个答案:

答案 0 :(得分:2)

  1. 构建图像并为其指定src属性
  2. 使用div:empty:first选择器
  3. 示例:

    $('.compare').click(function(){
        var img = $('<img>');
        img.attr('src', $(this).closest('.box').find('img').attr('src'));
        $('#area').find('div:empty:first').append(img);
    });
    

    <强> DEMO