JQuery toggleClass работает, добавив .text() замена по щелчку ломает его

Question

Все -

я, кажется, интересный вопрос в решении требования, где нажатие кнопки не только показывает/скрывает ДИВ под ней (отсюда ID значение на кнопке), но также должны изменить текст внутри кнопки, а также значка сплава, чтобы перейти от значка коллапса на иконку коллапса верхом (см больше здесь: http://nickpiesco.github.io/alloy-ui-font-awesome-cheatsheet/)

HTML

<div class="button-holder"> 
    <button class="btn btn-primary toggle-hidden" id="1">Expand 
     Options <span class="icon-collapse"></span></button> 
</div> 

JS

$(".hidden-group").hide(); 

$(".toggle-hidden").click(function(e) { 
    event.preventDefault(); 
    var text = $(this).text(); 

    $(this).text(
     text == "Minimize Options" ? "Expand Options" : "Minimize Options"); 

    $(this).find("span").toggleClass("icon-collapse"); 
    $(this).find("span").toggleClass("icon-collapse-top"); 

    $("#hidden-" + e.target.id).toggle(250); 

}); 

Проблема, если я закомментировать код замены .text() (который работает), код .toggleClass() начнет работать снова. С кодом .text() замена текста приведет к исчезновению тега при исследовании в инструментах разработчика Chrome. После переключая несколько раз, он будет выглядеть, не пядь не включены:

<button class="btn btn-primary toggle-hidden" id="1">Minimize Options</button> 

Я попытался увидеть, если я могу просто добавить промежуток в текст заменить код, но тогда вы будете просто получить фактические текст в кнопке.

Есть ли способ предотвратить замену .text() после удаления диапазона после него (что приводит к тому, что изображение находится в конце этой кнопки)? Другие мысли или предложения также приветствуются.

Answer 1

Вы можете сохранить копию диапазона перед заменой текста, а затем добавить его последним. Что-то вроде

$(".toggle-hidden").click(function(e) { 
    e.preventDefault(); 
    var text = $(this).text(); 
    var $span = $(this).find("span"); 
    $(this).text(
     text == "Minimize Options" ? "Expand Options" : "Minimize Options"); 

    $(this).append($span); 
    $(this).find("span").toggleClass("icon-collapse"); 
    $(this).find("span").toggleClass("icon-collapse-top"); 

    $("#hidden-" + e.target.id).toggle(250); 

}); 

Answer 2

Вы можете выбрать текст кнопки этот путь $(this).contents().first()[0].textContent.

 

 

 
$(".hidden-group").hide(); 
 

 
$(".toggle-hidden").click(function(e) { 
 
    event.preventDefault(); 
 
    var text = $(this).contents().first()[0].textContent; 
 

 
    $(this).contents().first()[0].textContent = 
 
     text == "Minimize Options" ? "Expand Options" : "Minimize Options"; 
 

 
    $(this).find("span").toggleClass("icon-collapse"); 
 
    $(this).find("span").toggleClass("icon-collapse-top"); 
 

 
    $("#hidden-" + e.target.id).toggle(250); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div class="button-holder"> 
 
    <button class="btn btn-primary toggle-hidden" id="1">Expand 
 
     Options <span class="icon-collapse"> *Span content*</span></button> 
 
</div>