jQuery切换带有内部引导图标的文本按钮

Question

我正在使用Boostrap 3和Jquery，并且我试图在带有boostrap图标跨度的按钮内切换文本，但不知道该怎么做。 这是我尝试的：
html代码：

<button type='button' class='btn btn-success btn-md'>
<span class='glyphicon glyphicon-edit'></span> Edit</button>

jQuery代码：

$(this).text(function(i, text){
  return text === "<span class='glyphicon glyphicon-edit'></span> Close" ? "<span class='glyphicon glyphicon-edit'></span> Edit" : "<span class='glyphicon glyphicon-edit'></span> Close"
})

那么...这怎么可能呢？
1）带有切换文本按钮但保持相同图标的示例。
2）另一个带有切换文本按钮但切换图标类的示例
谢谢。

Answer 1

这个怎么样：

<button class="btn btn-primary toggle-text" data-toggle="collapse" href="#collapseExample">
<span class='glyphicon glyphicon-edit'></span><span>Edit</span><span class="hidden">Close</span>...

$('.hidden').removeClass('hidden').hide();
$('.toggle-text').click(function() {
    $(this).find('span').each(function() { $(this).toggle(); });
});

http://jsfiddle.net/bcwhh8cp/

Answer 2

可以使用indexOf代替=== ，因为：

$(this).text() === "↵     Edit"

就像您看到的那样，还有一个额外的字符（换行符），您不能依靠它。

jQuery.html的代码段是：

 $('button').on('click', function(e) { $(this).html(function(i, text){ return (text.indexOf("Close") != -1) ? "<span class='glyphicon glyphicon-edit'></span> Edit" : "<span class='glyphicon glyphicon-edit'></span> Close" }) }) 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <button type='button' class='btn btn-success btn-md'> <span class='glyphicon glyphicon-edit'></span> Edit</button> 

或者，在JS中，您可以编写：

this.childNodes[2].textContent = (this.childNodes[2].textContent.indexOf("Close") != -1) ? 
      ' Edit' : ' Close';

片段：

 $('button').on('click', function(e) { this.childNodes[2].textContent = (this.childNodes[2].textContent.indexOf("Close") != -1) ? ' Edit' : ' Close'; }) 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <button type='button' class='btn btn-success btn-md'> <span class='glyphicon glyphicon-edit'></span> Edit</button> 

Answer 3

您应该使用html()而不是text()

$(this).html(function(i, text){
  return text === "<span class='glyphicon glyphicon-edit'></span> Close" ? "<span class='glyphicon glyphicon-edit'></span> Edit" : "<span class='glyphicon glyphicon-edit'></span> Close"
})