jQuery – Basculer le texte .html?

Pourquoi ça ne marche pas?

http://jsfiddle.net/PdwJ6/

HTML

Before 

JS

 $('#showMore').click(function() { $(this).toggle( function () { $(this).html('After');}, function () { $(this).html('Before'); }); }); 

Je ne sais pas ce qui se passe avec JsFiddle.net, mais je ne peux pas poster de démo.

Vous imbriquez deux fonctions l’une dans l’autre ( .click() et .toggle() ), et .toggle() gère un click , ce qui peut entraîner des conflits. Utilisez également text() au lieu de html() :

HTML :

 Before 

JavaScript :

 $('#showMore').toggle(function() { $(this).text('Before'); }, function() { $(this).text('After'); }); 

Blender a la réponse appropriée, mais nous pouvons aussi généraliser votre question dans un simple plugin jQuery:

 $.fn.toggleText = function(t1, t2){ if (this.text() == t1) this.text(t2); else this.text(t1); return this; }; 

Votre code ressemblerait alors à:

 $('#showMore').click(function(){ $(this).toggleText('Before', 'After'); }) 

Une solution simple pour basculer après un clic:

 $('#showMore').on('click', function(){ $(this).html() == "after" ? $(this).html('before') : $(this).html('after'); }); 

Vous un click à la et qu’à l’intérieur de cela vous une toggle() à elle.

Si vous voulez simplement basculer, vous pouvez laisser le click() .

 $('#showMore').toggle( function() { $(this).html('After'); }, function() { $(this).html('Before'); }); 

Cela dit, vous placez un dans un autre Est-ce vraiment ce que vous voulez? Ou vous voulez simplement remplacer le .text() ? .text("Before")

Jsfiddle exemple de toggle()

Voici une version réduite / “plus compacte” de la même réponse: “Une solution simple pour basculer après un clic” .

 $('#showMore').on('click', function(){ $(this).html($(this).html() == 'after' ? 'before' : 'after'); }); 

Bien sûr, cela nécessite le plugin jQuery pour que cela fonctionne.

parce que vous imbriquez un dans un autre, ce qui donne un résultat similaire à After

Vous devriez simplement utiliser $(this).text('After') et la même chose avec Before

Je suppose que vous vouliez utiliser replaceWith() ce qui n’est pas très efficace dans cette situation car seul le texte change.

++ le bug de bascule repéré dans les autres réponses. Bravo à eux 😉

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