HTML實體裏面的jQuery html（）

Question

我有一個隱藏的div和一個鏈接來切換div的可見性。該鏈接包含需要切換（'隱藏'/'顯示'）的文本/ HTML。這裏是我的功能：

jQuery('#toggle_filter_link').click(function() { 
    jQuery('#searchfilter_wrap').slideToggle("slow"); 
    jQuery(this).html(jQuery(this).text() == 'Hide ↑' ? 'Show ↓' : 'Hide ↑'); 
}); 

如預期，直到我添加箭頭到HTML（↑和↓），此時它切換爲「隱藏↑」第一次，然後仍停留此功能。

這裏a jsFiddle。

我假設我需要以某種方式轉義HTML實體，但考慮到第一個開關的工作原理，我有點困惑。可能很明顯，我很想念。 :-)

感謝您的幫助！

Answer 1

你比較文本到HTML

變化jQuery(this).text()到jQuery(this).html()。

請注意，由於瀏覽器使HTML標準化的方式可能仍然存在問題，因此您可能會更好地測試其他條件。

jQuery('#toggle_filter_link').click(function() { 
    jQuery('#searchfilter_wrap').slideToggle("slow"); 
    var $this = jQuery(this); 
    if ($this.hasClass('show')) { 
     $this.removeClass('show'); 
     $this.html('Hide ↑'); 
    } else { 
     $this.addClass('show'); 
     $this.html('Show ↓'); 
    } 
}); 

...或者只是測試的是不會是標準化的東西：

jQuery('#toggle_filter_link').click(function() { 
    jQuery('#searchfilter_wrap').slideToggle("slow"); 
    jQuery(this).html(jQuery(this).text().indexOf('Hide') > -1 ? 'Show ↓' : 'Hide ↑'); 
});