带有引导图标的 Jquery 切换文本按钮答案

【问题标题】：Jquery toggle text button with bootstrap icon inside带有引导图标的 Jquery 切换文本按钮
【发布时间】：2016-12-27 20:25:11
【问题描述】：

我正在使用 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) 另一个使用切换文本按钮但切换图标类的示例
谢谢。

【问题讨论】：

由于您将原始 HTML 放入元素中，因此您需要使用 .html 而不是 .text。
最后我把“编辑”文本放到了一个标签中，这样更容易替换内容。但感谢您的回答。

标签： javascript jquery html twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

您可以使用 indexOf 而不是 ===，因为：

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

就像你可以看到有一个额外的字符（换行符），你不能依赖这个。

带有jQuery.html的sn-p是：

$('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';

sn-p：

$('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>

【讨论】：

【解决方案2】：

这个怎么样：

<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/

【讨论】：

【解决方案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"
})

【讨论】：