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

    });