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()。

您要插入的内容... Filter Products" ? "Close Filters" : "Filter Products ...包含HTML代码，而不仅仅是文字。

Answer 2

你正在改变的是文字，但你正在比较html尝试;例如$(this).text()返回＆＃34;过滤产品＆＃34;但是.html()会返回＆＃34;  Filter Products＆＃34;

你可以使用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始终是一种很好的做法。

Jquery按钮切换更改文本和跨度类

2 个答案: