jquery - jqueryで画像を切り替える

Question

親要素「.learn-more」に「sprites arrow-d」という画像があります。詳細がクリックされた場合、矢印 d を矢印 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

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

Answer 2

.toggleClass()代わりにメソッドを使用できます。そうすれば、クラスが存在するかどうかを確認する必要がなくなります。このようなもの：

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

Answer 3

  $('.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');
        }

    });