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

您应该使用var clicked = false; $('a').click(function(e) { if(clicked === true){ //link already formatted // link should open here } else{ e.preventDefault(); //code to format link clicked = true; $(this).trigger('click'); } });代替while (responseSuccess === false) { responseSuccess = await myClass.executeScript; });

html()

Jquery切换文本按钮，里面有bootstrap图标

3 个答案: