JQuery Toggle Text change

Lorsque vous utilisez slideToggle , comment changer le texte fermer / afficher. J'ai fait un simple, mais je ne peux pas récupérer le texte.

Voici ce que j'ai fait http://jsfiddle.net/9EFNK/ Si quelqu'un pouvait me donner une main? Merci

Vous pouvez utiliser la méthode d'assertion is() pour vérifier si le panneau est ouvert ou fermé dans le rappel de l'animation et définir le texte en conséquence – http://jsfiddle.net/9EFNK/7/

 $('.open').click(function(){ var link = $(this); $('.showpanel').slideToggle('slow', function() { if ($(this).is(':visible')) { link.text('close'); } else { link.text('open'); } }); }); 

Ajoutez simplement une simple déclaration if pour tester le texte de la manière suivante

 $('.open').click(function(){ $('.showpanel').slideToggle('slow'); if($(this).text() == 'close'){ $(this).text('Show'); } else { $(this).text('close'); } }); 

A l'image de cette DEMO

Voici une version mise à jour http://jsfiddle.net/9EFNK/1/

Vous pouvez simplement basculer une classe sur fermer / ouvrir, effectuer un contrôle pour cette classe et modifier le texte contenu en conséquence

 if( $(this).hasClass('active') ) $(this).text('open'); else $(this).text('Show'); $(this).toggleClass('active'); 

Pas le plus beau des méthodes, mais il fait le travail dans une déclaration unique.

 $(this).text(($(this).text() == 'Close') ? 'Show' : 'Close'); 

Utilisez .toggle ()

Voici Démonstration de travail

 $('.open').click(function(){ $('.showpanel').slideToggle('slow'); }).toggle(function() { $(this).text('Hide'); }, function() { $(this).text('Show'); }); 

Vérifiez que cela pourrait être question d'utilisateur est résoudre Fiddle

Essayez cette démo

 $(document).ready(function(){ $('.open').toggle(function(){ $('.showpanel').slideToggle('slow'); $(this).text('close'); }, function(){ $('.showpanel').slideToggle('slow'); $(this).text('Show'); }); $('.open2').toggle(function(){ $('.showpanel2').slideToggle('slow'); $(this).text('close'); }, function(){ $('.showpanel2').slideToggle('slow'); $(this).text('Show'); }); });​ 

Utilisez ceci

 jQuery.fn.toggleText = function() { var altText = this.data("alt-text"); if (altText) { this.data("alt-text", this.html()); this.html(altText); } }; 

Voici comment vous l'utilisez

 jQuery.fn.toggleText = function() { var altText = this.data("alt-text"); if (altText) { this.data("alt-text", this.html()); this.html(altText); } }; $('[data-toggle="offcanvas"]').click(function () { $(this).toggleText(); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <button data-toggle="offcanvas" data-alt-text="Close">Open</button>