jQuery按鈕切換更改文本和跨度類

Question

我有一個工作切換按鈕，可以上下滑動div。 我遇到的問題是，當我嘗試更改切換按鈕狀態時：

我的代碼演示在這里： http : //jsfiddle.net/zwu0sn83/3/

按鈕代碼，圖標的內部跨度：

<a href="#" id="toggle-reveal" class="c-1 sort-btn" title="Filter Products"><span class="ico sort"></span> Filter Products</a>

我正在使用以下內容來更改文本，但span html是actul文本而不是html。 我需要更改文本並更新span類：

$(this).text(function(i, text){
      return text === "<span class='ico sort'></span>Filter Products" ? "<span class='ico close-sort'></span>Close Filters" : "<span class='ico sort'></span>Filter Products";
});

Answer 1

代替$(this).text() ，使用$(this).html() 。

您要插入的內容... <span class='ico sort'></span>Filter Products" ? "<span class='ico close-sort'></span>Close Filters" : "<span class='ico sort'></span>Filter Products ...具有html代碼，而不僅僅是文本。

Answer 2

您要更改的是文本，但是您正在比較html try； 例如$(this).text()返回“過濾產品”，但.html()返回“ <span class="ico sort"></span> Filter Products ”

您可以使用具有相同邏輯的html來代替；

$(this).html(function(i, oldHTML){
      //alternatively you can use oldHTML.indexOf("Products") > -1
      return oldHTML === "<span class='ico sort'></span>Filter Products" ? "<span class='ico close-sort'></span>Close Filters" : "<span class='ico sort'></span>Filter Products";
});

但是在這種情況下，我使用的是類切換，在您的情況下，還需要對html結構進行一些更改。

$(this).toggleClass("filter")

並使用簡單的CSS可以切換視圖，例如

a.filter span.sort {
   display:hidden;
}

將html和js分開始終是一個好習慣。