jquery przełącza zawartość wewnątrz elementu

Question

Próbuję zamienić zawartość w obrębie przycisku, który przełącza zawalenie na nav.

Mam obecnie następujący kod;

<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"); 

}); 

Chcę mieć możliwość zmiany zawartości w ramach;

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

To musi być przełączana jednak, więc po kliknięciu upadek, zmienia się z powrotem do stanu pierwotnego

nie wydają się zrozumieć to ...

Answer 1

To jest chyba to, czego szukasz: 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

można użyć firstElementChild uzyskać <i> a następnie zmienić jego className według rzeczywistej className, więc będzie przełączać się pomiędzy tymi dwoma klasami ma:

$("#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

ten sposób byłoby to zrobić:

$(".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