Texte du bouton à bascule en jquery

Lorsque je clique sur ".pushme" bouton, il tourne son texte sur "Don't push me". Je veux me tourner de nouveau ce texte de "push me" lorsque le bouton est cliqué à nouveau. Comment puis-je le faire?

<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/

Grâce.

double possible de Jquery Texte de Bascule?

InformationsquelleAutor Dorukcan Kişin | 2012-11-30

177

Vous pouvez utiliser text méthode:
```
$(function(){
   $(".pushme").click(function () {
      $(this).text(function(i, text){
          return text === "PUSH ME" ? "DON'T PUSH ME" : "PUSH ME";
      })
   });
})
```
http://jsfiddle.net/CBajb/
- Quelqu'un peut m'expliquer pourquoi avoir html spécifique à l'intérieur de la html ne fonctionne pas? jsfiddle.net/CBajb/18
- vous sir sont un savant et un homme
- si PUSH ME et DON'T PUSH ME sont en fait deux paragraphes, alors est-il une manière plus propre de faire cela?
- Oui, il est. L'utilisation d'un objet: conditon ? obj.par1 : obj.par2. Une autre option est le basculement de la visibilité des éléments.
- quel est le point du paramètre "i"? Je ne comprends pas pourquoi il est nécessaire, mais je sais que c'est nécessaire, car il ne fonctionne pas sans elle. Je comprends pourquoi le texte est nécessaire, mais "je" ne peut pas être utilisé?
- renvoie l'indice de l'itération. Nous devons accepter le premier paramètre pour utiliser le deuxième paramètre. C'est la façon dont les fonctions de travail! On peut aussi utiliser this.textContent à la place de le deuxième paramètre de la fonction de rappel. Fondamentalement text ici est égal à this.currentText, où this se réfère à une cliqué .pushme élément.
InformationsquelleAutor undefined
17

Vous pouvez également utiliser .toggle() comme suit:
```
$(".pushme").toggle(function() {
    $(this).text("DON'T PUSH ME");
}, function() {
    $(this).text("PUSH ME");
});
```
Plus d'info à http://api.jquery.com/toggle-event/.

De cette façon rend également assez facile de changer le texte ou ajouter plus de seulement 2 différents états.
- .la bascule a été supprimé en jquery 1.9. C'est une honte. L'air plutôt sympa!
- C'est vrai, malheureusement. Bascule existe toujours pour masquer/afficher les éléments api.jquery.com/toggle mais cet exemple ne serait plus du poste de travail-1.9. 🙁
- Il y a assez de bonnes solutions de rechange, voir, par exemple, cette réponse.
InformationsquelleAutor gotohales

Utiliser un IDENTIFIANT personnalisé si possible si vous souhaitez appliquer l'action que pour le bouton.

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

De Travail CodePen: Basculer le texte dans le bouton

InformationsquelleAutor timbck2

Avec tant de bonnes réponses, je pensais que j'allais jeter un de plus dans le mélange. Celui-ci, contrairement aux autres, vous permettent de passer à travers n'importe quel nombre de messages à l'aise:

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/

InformationsquelleAutor Sampson

Utiliser un if/else.. ou ternaire si vous le 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/

InformationsquelleAutor ᾠῗᵲᄐᶌ

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

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

Ce if-else:

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

a l'équivalent ternaire expression:

condition ? A : B

InformationsquelleAutor Art Knipe

J'préférez la manière suivante, il peut être utilisé par n'importe quel bouton.

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

démo

InformationsquelleAutor Ricardo Alvaro Lohmann

2

Si vous êtes le réglage de la touche de texte à l'aide de la "valeur" de l'attribut que vous aurez besoin de mettre en
- $(this).val()
au lieu de:
- $(this).texte()
Aussi dans ma situation, c'était mieux pour ajouter le JQuery direct à l'événement onclick du bouton:
```
onclick="$(this).val(function (i, text) { return text == 'PUSH ME' ? 'DON'T PUSH ME' : 'PUSH ME'; });"
```
- Pour moi, ce n'est qu'à tout autre clic sur le bouton.
- Un ami m'a aidé à comprendre que c'était parce que j'avais deux écouteurs d'événement. Je viens de coller du code à partir de l'autre de répondre directement dans un fichier JS, et j'ai été l'appel de la fonction parent d'un onclick ainsi.
InformationsquelleAutor Chris Halcrow

Vous pouvez également utiliser la fonction mathématique pour ce 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

InformationsquelleAutor JSEvgeny

Vous devez vous connecter pour publier un commentaire.