jQueryのtoggleClassをクリック上の.text（）の交換を追加すると、それを

Question

すべてを壊し、作品 -

私だけではなく、ボタンをクリックするショー/ので、（その下のdivを隠し要件に対処する上で興味深い問題を持っているように見えますボタンの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

テキストを置き換える前にスパンのコピーを保持しておき、後から追加することができます。何かのように

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>