JQuery：如何使用HTML ascii箭頭切換指示符？

Question

我來到across this great JQuery example使用slidetoggle。

我想實現它，除了一件事情。

該示例使用上下圖像（白色）箭頭指示器。

我不能使用HTML ascii向上箭頭（↑）和向下箭頭（↓）而不是使用圖像。

如果是這樣，怎麼樣？

Answer 1

我相信這樣的事情應該工作：

$(".btn-slide").click(function(){ 
    $("#panel").slideToggle("slow"); 
    $(this).toggleClass("active"); 

    //Toggle text here (I may have the up/down order inverted) 
    $(".btn-slide").toggle(function() { 
     $(this).text('Slide ↑'); 
    }, function() { 
     $(this).text('Slide ↓'); 
    }); 
    return false; 
}); 

基本上想法只是切換被點擊時，它的鏈接上的文字，同樣的地方筆者切換向上/向下滑動。

有關toggle()的詳細信息，請點擊這裏。

您還需要從這裏卸下白色背景圖片：

.btn-slide { 
background:url("images/white-arrow.gif") no-repeat scroll right -50px 

HTH

Answer 2

您可以按如下方式更改錨點元素的文本值。

$(".btn-slide").click(function(){ 
    $("#panel").slideToggle("slow"); 
    $(this).toggleClass("active"); return false; 
    $(this).text('YourText ' + ($(this).hasClass('active') ? '↑' : '↓')); 
});  

取出箭頭的形象是通過消除.btn-slide選擇的CSS屬性background完成。

Answer 3

於我而言，我更喜歡使用屬性.attr()

$(this).attr('value', '↑'); 

當使用螢火蟲測試，我使用.val()或.html()，<input>後會增加額外</input>。它不適合我。

對不起，我的英文不好。