jquery로 이미지 토글

Question

"sprites arrow-d"라는 이미지가 부모 요소 ".learn-more"에 있습니다. learn-more를 클릭하면 화살표 -u가 arrow-u로 바뀌고 그 반대도 마찬가지입니다. 이것을 쓰는 가장 좋은 방법은 무엇입니까?

$('.learn-more').click(function() { 

    if ($('.arrow-d').is('arrow-d')) 
    { 
    $('#hero').animate({ 
     'height':'400' 
    }, 700); 
     $('.arrow-d').removeClass('arrow-d').addClass('arrow-u'); 
    } 
    else 
    { 
     $('.arrow-u').removeClass('arrow-u').addClass('arrow-d'); 
    } 


}); 

HTML :

 <div class="learn-more"> 
      <span>LEARN MORE ABOUT</span> 
      <i class="sprites arrow-d"></i> 
     </div> 

Answer 1

대신 .toggleClass() 방법을 사용할 수 있습니다. 그렇게하면 클래스가 존재하는지 여부를 확인할 필요가 없습니다. 위의 애니메이션에 대한

$('.learn-more').click(function() { 
    $('#hero').animate({ 
     'height':'400' 
    }, 700); 
    $("i.sprites").toggleClass("arrow-d arrow-u"); 
}); 

Answer 2

$('.learn-more').click(function() { 

    var sprites = $(this).find('sprites'); 
     if (sprites.hasClass('arrow-d')) 
     { 
$('#hero').animate({ 
     'height':'400px' 
    }, 700); 
      sprites.removeClass('arrow-d').addClass('arrow-u'); 
     } 
     else 
     { 
$('#hero').animate({ 
     'height':'80px' 
    }, 700); 
      sprites.removeClass('arrow-u').addClass('arrow-d'); 
     } 

    }); 

Answer 3

$('.learn-more').on('click', function() { 
    $('#hero').animate({'height': $('.arrow-d').length?400:80}, 700); 
    $('.arrow-d').toggleClass('arrow-d arrow-u'); 
});​