javascript - Jquery 切换文本按钮，内部带有 Bootstrap 图标

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

您可以使用 indexOf 代替 ===因为:

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

就像您看到的那样，有一个额外的字符(换行符)，您不能依赖它。

带有 jQ​​uery.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>