用jquery切換圖像

我在父元素「.learn-more」中有一個圖像「精靈箭頭-d」。如果learn-more被點擊，我想用arrow-u替換arrow-d，反之亦然。寫這個的最好方法是什麼？用jquery切換圖像

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

來源

2012-10-29 Josh

您可以使用.toggleClass()方法來代替。這樣你就不需要檢查類是否存在。事情是這樣的：

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

來源

2012-10-29 20:11:29

好，什麼對上面的動畫？我怎樣才能切換回「80px」 – Josh

@Josh你的意思是說你想單擊時添加80px，然後再次單擊時刪除80px？ –

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

    });

來源

2012-10-29 20:12:25

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

來源

2012-10-29 20:14:38 adeneo

用jquery切換圖像

回答

相關問題