이미지를 하나씩 클릭 할 때마다 클릭하십시오.

Question

여기에 fiddle example이 있습니다.

.area의 div 요소에 이미지를 하나씩 추가하려면 어떻게해야하나요? 첫 번째로 클릭 한 이미지가 무엇이든 첫 번째 div (왼쪽)를 차지하고 다음 클릭 한 이미지가 두 번째 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> 

Answer 1

1. 이미지를 구축하고
2. 만들기 사용 div:empty:first 선택에 src 속성을 할당

예 :

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

DEMO