jquery要素内のコンテンツを切り替える

Question

nav collapseを切り替えるボタン内のコンテンツを交換しようとしています。

私は現在次のコードを持っています。

<button class="navbar-toggle collapse in" data-toggle="collapse" id="menu-toggle-2"> <i class="fa fa-expand" aria-hidden="true"></i> Expand</button> 
//in js script 
$("#menu-toggle-2").click(function(e) { 
    e.preventDefault(); 
    $("#page").toggleClass("toggled-2"); 

}); 

私は中にコンテンツを変更したいと思っています。

<i class="fa fa-compress" aria-hidden="true"></i> Collapse 

あなたが使用することができます。これは、しかし、切り替えする必要がありますので、あなたが崩壊をクリックしたとき、それは元の状態に変化し

はそれを把握するように見えることはできません...

Answer 1

これは、あなたが探しているものはおそらくです：https://jsfiddle.net/oaftwxt2/

var clicked = 0; 

$("#menu-toggle-2").click(function(e) { 
    e.preventDefault(); 
    $("#page").toggleClass("toggled-2"); 

    if(clicked == 0){  
     $(this).html('<i class="fa fa-compress" aria-hidden="true"></i> Collapse'); 
     clicked = 1; 
    }else{ 
     $(this).html('<i class="fa fa-expand" aria-hidden="true"></i> Expand'); 
     clicked = 0; 
    } 
}); 

Answer 2

firstElementChild<i>を取得し、それはあなたがしたい二つのクラスが切り替わりますので、実際のclassNameに従ってそのclassNameを変更するには：

$("#menu-toggle-2").click(function(e) { 
    e.preventDefault(); 
    var i = this.firstElementChild; 
    i.className = i.className === 'fa fa-expand' ? 'fa fa-compress' : 'fa fa-expand'; 
    $("#page").toggleClass("toggled-2"); 
}); 

Answer 3

これは私がそれを行うだろうかです：

$(".navbar-toggle").click(function() { 
    if ($(this).text().trim() == "Expand") { 
     $(this).find("i").removeClass("fa-expand").addClass("fa-compress"); 
     $(this).contents()[2].data = "Collapse"; 
    } else { 
     $(this).find("i").removeClass("fa-compress").addClass("fa-expand"); 
     $(this).contents()[2].data = "Expand"; 
    } 
}); 

Here is the JSFiddle demo