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