jQuery를 같은 많은 요소, 하나는 내가 같은 코드가 당신이

Question

을 클릭하면 시작할 수 있습니다

<img src="fl_uk.png" class="menulink" /> 
<div class="test">Something</div> 
<img src="fl_uk.png" class="menulink" /> 
<div class="test">Something2</div> 





$('.menulink').click(function(){ 
    if($('.menulink').attr('src') == "fl_pol.png"){ 
     $(this).attr('src',"fl_uk.png"); 
     $('.test').hide('slow'); 
     return false; 
    } 
    else 
    { 
     $(this).attr('src',"fl_pol.png"); 
     $('.test').show('slow'); 
     return false; 
    } 


}); 

나는 이미지와 쇼 DIV를 변경해야 IMG를 클릭. 다시 클릭하면 이미지가 처음으로 돌아가고 div가 숨겨져 야합니다. 괜찮아. 그러나 나는 많은 imgae-buttons와 많은 divs가 있어야하고, 하나의 이미지 버튼을 클릭 한 후에이 이미지를 변경하고 이미지 아래의 div를 열어야한다고 생각합니다. 나는 그들이 데이터베이스에서 생성하고 있기 때문에 자신의 이미지와 div가 얼마나 될지 모른다. jQuery 코드를 반복하지 않으려면 jQuery 코드를 만드는 방법

Answer 1

질문에 답하기 위해 이미지 주위에 컨테이너가 있다고 가정합니다 (예 : <div id="images">...</div>). 이제이 솔루션은 매우 간단합니다.

이 작업은 jQuery가 아닌 원시 JS에서 수행되므로 상당히 빠릅니다. 또한 이미지 당 하나가 아닌 하나의 리스너 만 있도록 이벤트를 위임합니다.

Answer 2

이 시도 :

$('.menulink').on('click', function(){ 
    if($(this).attr('src') == "fl_pol.png"){ 
    $(this).attr('src',"fl_uk.png"); 
    $(this).next('.test').hide('slow'); 
    return false; 
    }else{ 
    $(this).attr('src',"fl_pol.png"); 
    $(this).next('.test').show('slow'); 
    return false; 
    } 
}); 

Answer 3

이 같은 짓을 수 있습니다

<img src="fl_uk.png" rel="uk" class="menulink" /> 
<div class="test" rel="uk_div">Something</div> 
<img src="fl_pol.png" rel="pol" class="menulink" /> 
<div class="test" rel="pol_div">Something2</div> 

다음

$(".menulink").on("click",function(){ 
    $(".test").hide(); 
    $("div[rel='"+$(this).attr("rel") + "_div']").show()); 
});