it-swarm.com.de

Schaltflächentext in jquery umschalten

Wenn ich auf ".pushme" klicke, ändert sich der Text zu "Don't Push me". Ich möchte den Text wieder auf "Push me" stellen, wenn erneut auf die Schaltfläche geklickt wird. Wie kann ich das machen?

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

Vielen Dank.

63
Dorukcan Kişin

Sie können die text -Methode verwenden:

$(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

Sie könnten auch .toggle() wie folgt verwenden:

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

Weitere Informationen unter http://api.jquery.com/toggle-event/ .

Auf diese Weise ist es auch ziemlich einfach, den Text zu ändern oder mehr als nur zwei verschiedene Zustände hinzuzufügen.

17
gotohales

Verwenden Sie nach Möglichkeit eine benutzerdefinierte ID, wenn Sie die Aktion nur auf diese Schaltfläche anwenden möchten.

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: Text in der Schaltfläche umschalten

9
timbck2

Bei so vielen tollen Antworten dachte ich, ich würde noch eine in die Mischung werfen. Mit diesem können Sie im Gegensatz zu den anderen Nachrichten mühelos durch eine beliebige Anzahl von Nachrichten blättern:

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];
    });
}​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​);​

Demo: http://jsfiddle.net/DQK4v/2/

5
Sampson

Verwenden Sie eine if/else-Anweisung oder eine ternäre Anweisung, wenn Sie sie verstehen

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

Dieser ternäre Operator hat eine implizite Rückgabe. Wenn der Ausdruck vor ?true ist, wird "DON'T Push ME" Zurückgegeben, andernfalls wird "Push ME" Zurückgegeben.

Diese if-else-Anweisung:

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

hat den äquivalenten ternären Ausdruck:

condition ? A : B
3
Art Knipe

Wenn Sie den Schaltflächentext mit dem Attribut 'value' festlegen, müssen Sie dies festlegen

  • $ (this) .val ()

anstatt:

  • $ (this) .text ()

Auch in meiner Situation hat es besser geklappt, die JQuery direkt zum onclick-Ereignis der Schaltfläche hinzuzufügen:

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

Sie können dazu auch die mathematische Funktion verwenden

var i = 0;
$('#button').on('click', function() {
    if (i++ % 2 == 0) {
        $(this).val("Push me!");
    } else {
        $(this).val("Don't Push me!");
    }
});

DEMO

1
JSEvgeny