jQuery Toggle Text?

 $(function() { $("#show-background").click(function () { $("#content-area").animate({opacity: 'toggle'}, 'slow'); }); var text = $('#show-background').text(); $('#show-background').text( text == "Show Background" ? "Show Text" : "Show Background"); }); 

Toggle cache ou montre des éléments. Vous pouvez obtenir le même effet avec toggle en ayant 2 liens et en les basculant lorsque vous cliquez dessus.

Désolé le problème est moi! le n’était pas synchronisé mais c’était parce que j’avais du texte HTML dans le mauvais sens. Au premier clic, je souhaite que le div soit fondu et que le texte indique “Afficher le texte”.

Va vérifier plus soigneusement la prochaine fois avant de demander!

Mon code est maintenant:

 $(function() { $("#show-background").toggle(function (){ $("#content-area").animate({opacity: '0'}, 'slow') $("#show-background").text("Show Text") .stop(); }, function(){ $("#content-area").animate({opacity: '1'}, 'slow') $("#show-background").text("Show Background") .stop(); }); }); 

Merci encore pour votre aide!

La plus belle réponse est … Prolongez jQuery avec cette fonction …

 $.fn.extend({ toggleText: function(a, b){ return this.text(this.text() == b ? a : b); } }); 

HTML:

  Initial  

Utilisation:

 $(".example").toggleText('Initial', 'Secondary'); 

J’ai utilisé la logique (x == b? A: b) dans le cas où le texte HTML initial est légèrement différent (un espace supplémentaire, un point, etc.), donc vous ne recevrez jamais une copie du valeur initiale prévue

(Aussi pourquoi j’ai volontairement laissé des espaces dans l’exemple HTML 😉

Une autre possibilité pour l’utilisation de la bascule HTML scope à mon attention par Meules [ci-dessous] est:

 $.fn.extend({ toggleHtml: function(a, b){ return this.html(this.html() == b ? a : b); } }); 

HTML:

 
John Doe was an unknown. Read More...  

Utilisation:

 $("readmore_john_doe").click($.toggleHtml( 'Read More...', 'Until they found his real name was Doe John.') ); 

(ou quelque chose comme ça)

Améliorer et simplifier la réponse de @ Nate:

 jQuery.fn.extend({ toggleText: function (a, b){ var that = this; if (that.text() != a && that.text() != b){ that.text(a); } else if (that.text() == a){ that.text(b); } else if (that.text() == b){ that.text(a); } return this; } }); 

Utilisé comme:

 $("#YourElementId").toggleText('After', 'Before'); 

 jQuery.fn.extend({ toggleText: function (a, b){ var isClicked = false; var that = this; this.click(function (){ if (isClicked) { that.text(a); isClicked = false; } else { that.text(b); isClicked = true; } }); return this; } }); $('#someElement').toggleText("hello", "goodbye"); 

Extension pour JQuery qui ne fait que basculer du texte.

JSFiddle: http://jsfiddle.net/NKuhV/

Pourquoi ne pas les emstackr simplement ::

 $("#clickedItem").click(function(){ $("#animatedItem").animate( // ); }).toggle( // <--- you just stack the toggle function here ... function(){ $(this).text( // ); }, function(){ $(this).text( // ); }); 

 var el = $('#someSelector'); el.text(el.text() == 'view more' ? 'view less' : 'view more'); 

Utilisez html () pour basculer le contenu HTML. Similaire au code de fflyer05 :

 $.fn.extend({ toggleText:function(a,b){ if(this.html()==a){this.html(b)} else{this.html(a)} } }); 

Usage:

 Toggle me! 

Violon: http://jsfiddle.net/DmppM/

J’ai écrit ma propre petite extension pour toggleText. Cela peut être utile.

Violon: https://jsfiddle.net/b5u14L5o/

Extension jQuery:

 jQuery.fn.extend({ toggleText: function(stateOne, stateTwo) { return this.each(function() { stateTwo = stateTwo || ''; $(this).text() !== stateTwo && stateOne ? $(this).text(stateTwo) : $(this).text(stateOne); }); } }); 

Usage:

 ... Unknown ... //------- BEGIN eg 1 ------- //Initial button text is: 'Unknown' $('button').on('click', function() { $(this).toggleText('Show', 'Hide'); // Hide, Show, Hide ... and so on. }); //------- END eg 1 ------- //------- BEGIN eg 2 ------- //Initial button text is: 'Unknown' $('button').on('click', function() { $(this).toggleText('Unknown', 'Hide'); // Hide, Unknown, Hide ... }); //------- END eg 2 ------- //------- BEGIN eg 3 ------- //Initial button text is: 'Unknown' $('button').on('click', function() { $(this).toggleText(); // Unknown, Unknown, Unknown ... }); //------- END eg3 ------- //------- BEGIN eg4 ------- //Initial button text is: 'Unknown' $('button').on('click', function() { $(this).toggleText('Show'); // '', Show, '' ... }); //------- END eg4 ------- 

En modifiant ma réponse à votre autre question , je ferais ceci:

 $(function() { $("#show-background").click(function () { var c = $("#content-area"); var o = (c.css('opacity') == 0) ? 1 : 0; var t = (o==1) ? 'Show Background' : 'Show Text'; c.animate({opacity: o}, 'slow'); $(this).text(t); }); }); 

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 poursuivez en justice

 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(); }); 

  Open 

Dans la plupart des cas, vous auriez un comportement plus complexe lié à votre événement de clic. Par exemple, un lien qui fait basculer la visibilité de certains éléments, auquel cas vous souhaiterez permuter le texte du lien de “Afficher les détails” à “Masquer les détails” en plus d’autres comportements. Dans ce cas, ce serait une solution préférée:

 $.fn.extend({ toggleText: function (a, b){ if (this.text() == a){ this.text(b); } else { this.text(a) } } ); 

Vous pouvez l’utiliser de cette façon:

 $(document).on('click', '.toggle-details', function(e){ e.preventDefault(); //other things happening $(this).toggleText("Show Details", "Hide Details"); }); 

 $.fn.toggleText = function(a){ var ab = a.split(/\s+/); return this.each(function(){ this._txIdx = this._txIdx!=undefined ? ++this._txIdx : 0; this._txIdx = this._txIdx