각 루프 내의 Jquery 클릭 함수

Question

이 예에서 .zoom을 클릭하면 20 개 (루프에있는 항목의 양) .big_image divs를 주입합니다. 클릭하는 항목과 관련하여 하나를 삽입하고 싶습니다.

$('.main img').each(function() { 
var img = this; 
$('.zoom').click(function() { 
    $(this).after('<div class="big_image"><img src="'+$(img).attr('src')+'"></div>'); 
}); 
}); 

여기 스크립트를 간단하게했습니다. 이상적으로는 질문과 관련이없는 다른 것들이 있기 때문에 가능한 경우 클릭 기능을 수정하는 방법을 알고 싶습니다. 감사!

편집 : 작업 예제 here.

줌 버튼은 갤러리의 처음 두 이미지 (왼쪽 상단)에 표시되어야합니다. 혼란 스럽다면, 매우 긴/큰 이미지에만 줌 버튼을 표시하려고합니다. 나는 또한 내가 setClass 기능을 분할해야한다고 알고 있어요하지만 아직 :)

Answer 1

응답자가 어떤 이유로 든 답변을 삭제했습니다. 열쇠는 다음 내용입니다()

var img = this; 
$(this).next('.zoom').click(function() { 
    $(this).after('<div class="big_image"><img src="'+$(img).attr('src')+'"></div>'); 
}); 

Answer 2

$('.zoom').click(function(e){ 
    var imgURL= $(this).parents('.main').find('img').attr('src'); 
    $(this).after('<div class="big_image"><img src="'+imgURL+'"></div>') 
}); 

.main 컨테이너가 모두 img과의 직접적인 부모 인 경우가 .zoom 당신이

를 사용하는 방법을 배운하지 않은

var imgURL= $(this).siblings('img').attr('src'); 

루프 내부에 있어야합니다. 아래 코드를 수정 해보십시오.

var flag=false; 
$('.main img').each(function() { 
    var img = this; 
    $('.zoom').click(function() { 
    if(!flag) 
     $(this).after('<div class="big_image"><img src="'+$(img).attr('src')+'"></div>'); 
    flag=true; 
    }); 
});