切換一個背景圖像位置

Question

我有下面的代碼，顯示/隱藏一個div而改變取決於在div是否被顯示或不顯示的文本：

$('#more').click(function() { 
    $('#extra').slideToggle('fast'); 
    $('#more').text(function(_,txt) { 
     return txt == 'More about us' ? 'Less about us' : 'More about us'; 
    }); 
    return false; 
}); 

在#more鏈路我有指向下方的箭頭（對於'更多關於我們'的文本，當div被隱藏時），但我想要改變這個箭頭來指出div何時可見，文本是「Less About us」。我如何編輯上面的代碼來做到這一點？

Answer 1

嘗試

$('#more').click(function() { 
    $('#extra').slideToggle('fast'); 
    $('#more').text(function(_,txt) { 
     var ret=''; 

     if (txt == 'More about us') { 
      ret = 'Less about us'; 
      $(this).css('background','url(link/to/image1.png)'); 
     }else{ 
      ret = 'More about us'; 
      $(this).css('background','url(link/to/image2.png)'); 
     } 
     return ret; 
    }); 
    return false; 
}); 

禮貌

Toggle text when link is clicked

Answer 2

我想你可以創建兩個CSS類，然後只需設置正確的類：

$('#more').removeClass("arrowdown"); 
$('#more').addClass("arrowup"); 

反之亦然，取決於你剛剛設置的文字。

Answer 3

結束了使用一些代碼，在更新前一個問題：

$('#more').click(function() { 
    $('#extra').slideToggle('fast'); 
    $('#more').text(function(_,txt) { 
     var ret=''; 

     if (txt == 'More about us') { 
      ret = 'Less about us'; 
      $(this).css('background','url(link/to/image1.png)'); 
     }else{ 
      ret = 'More about us'; 
      $(this).css('background','url(link/to/image2.png)'); 
     } 
     return ret; 
    }); 
    return false; 
});