JQuery переключает текстовую кнопку с иконкой начальной загрузки

Question

Im работает с Boostrap 3 и JQuery и Im, пытаясь переключить текст внутри кнопки с помощью значка прокрутки, но не знает, как это сделать. Это то, что я пробовал:
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" 

Как вы можете видеть, что есть дополнительный символ (символ новой строки), и вы не можете полагаться на это.

Сниппет с 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 2

Вы должны использовать 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" 
}) 

Answer 3

Как об этом:

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