web-dev-qa-db-fra.com

Bouton texte bascule dans jQuery

Lorsque je clique sur le bouton ".pushme", son texte devient "Ne me poussez pas". Je veux transformer le texte à nouveau pour "Push me" lorsque le bouton est cliqué à nouveau. Comment puis je faire ça?

<html>

<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>

<body>
    <button class='pushme'>Push ME</button>
    <script>
        $(".pushme").click(function () {
            $(this).text("DON'T Push ME");
        });
    </script>
</body>

</html>

http://jsfiddle.net/DQK4v/

Merci.

jquerybuttontoggle
63
Dorukcan Kişin

Vous pouvez utiliser la méthode text:

$(function(){
   $(".pushme").click(function () {
      $(this).text(function(i, text){
          return text === "Push ME" ? "DON'T Push ME" : "Push ME";
      })
   });
})

http://jsfiddle.net/CBajb/

179
undefined

Vous pouvez aussi utiliser .toggle() comme ceci:

$(".pushme").toggle(function() {
    $(this).text("DON'T Push ME");
}, function() {
    $(this).text("Push ME");
});

Plus d'infos sur http://api.jquery.com/toggle-event/ .

De cette façon, il est également très facile de changer le texte ou d’ajouter plus de 2 états différents.

17
gotohales

Utilisez un identifiant personnalisé si possible si vous souhaitez appliquer l'action à ce bouton uniquement.

HTML

<button class="pushDontpush">Push ME</button>

jQuery

$("#pushDontpush").click(function() { 
    if ($(this).text() == "Push ME") { 
        $(this).text("DON'T Push ME"); 
    } else { 
        $(this).text("Push ME"); 
    }; 
});

Working CodePen: Basculer le texte dans le bouton

9
timbck2

Avec tant de bonnes réponses, j'ai pensé en jeter une de plus dans le mélange. Celui-ci, contrairement aux autres, vous permettrait de parcourir facilement un nombre quelconque de messages:

var index = 0,
    messg = [
        "Push ME", 
        "DON'T Push ME", 
        "I'M SO CONFUSED!"
    ];

$(".pushme").on("click", function() {
    $(this).text(function(index, text){
        index = $.inArray(text, messg);
        return messg[++index % messg.length];
    });
}​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​);​

Démo: http://jsfiddle.net/DQK4v/2/

5
Sampson

Utilisez une déclaration if/else .. ou ternaire si vous la comprenez

$(".pushme").click(function () {
    var $el = $(this);
    $el.text($el.text() == "DON'T Push ME" ? "Push ME": "DON'T Push ME");
});

http://jsfiddle.net/dFZyv/

4
ᾠῗᵲᄐᶌ
$(".pushme").click(function () {
  var button = $(this);
  button.text(button.text() == "Push ME" ? "DON'T Push ME" : "Push ME")           
});

Cet opérateur ternaire a un retour implicite. Si l'expression avant ? est true il retourne "DON'T Push ME", sinon renvoie "Push ME"

Cette déclaration if-else:

if (condition) { return A }
else { return B }

a l'expression ternaire équivalente:

condition ? A : B
3
Art Knipe

Si vous définissez le texte du bouton à l'aide de l'attribut 'value', vous devez définir

  • $ (this) .val ()

au lieu de:

  • $ (this) .text ()

De plus, dans mon cas, il a été préférable d’ajouter JQuery directement à l’événement onclick du bouton:

onclick="$(this).val(function (i, text) { return text == 'Push ME' ? 'DON'T Push ME' : 'Push ME'; });"
2
Chris Halcrow

[._____<button class='pushme' data-default-text="Push ME" data-new-text="DON'T Push ME">Push ME</button> $(".pushme").click(function () { var $element = $(this); $element.text(function(i, text) { return text == $element.data('default-text') ? $element.data('new-text') : $element.data('default-text'); }); }); .

demo
 2 
Ricardo Alvaro Lohmann
Vous pouvez également utiliser la fonction mathématique pour le faire
var i = 0;
$('#button').on('click', function() {
    if (i++ % 2 == 0) {
        $(this).val("Push me!");
    } else {
        $(this).val("Don't Push me!");
    }
});

 DÉMO 
 1 
JSEvgeny