web-dev-qa-db-ja.com

jqueryのボタンテキストの切り替え

「.pushme」ボタンをクリックすると、そのテキストが「プッシュしないでください」に変わります。ボタンをもう一度クリックしたときに、テキストをもう一度「Push me」に変えたいです。どうやってやるの？

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

ありがとう。

jquerybuttontoggle
63
Dorukcan Kişin

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

.toggle()を次のように使用することもできます。

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

詳細については http://api.jquery.com/toggle-event/ をご覧ください。

この方法により、テキストを変更したり、2つ以上の異なる状態を追加したりすることも非常に簡単になります。

17
gotohales

そのボタンのみにアクションを適用する場合は、可能であればカスタムIDを使用します。

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

作業コードペン： ボタン内のテキストの切り替え

9
timbck2

非常に多くの素晴らしい答えがあり、私はミックスにもう1つを投げると思いました。これは、他とは異なり、任意の数のメッセージを簡単に循環させることができます。

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

デモ： http://jsfiddle.net/DQK4v/2/

5
Sampson

If/elseステートメントを使用します。理解できる場合は3項を使用します

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

この三項演算子には暗黙的な戻り値があります。 ?の前の式がtrueである場合は"DON'T Push ME"を返し、そうでない場合は"Push ME"を返します

このif-elseステートメント：

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

同等の三項式があります：

condition ? A : B
3
Art Knipe

「value」属性を使用してボタンテキストを設定する場合は、設定する必要があります

  • $（this）.val（）

の代わりに：

  • $（this）.text（）

また、私の状況では、ボタンのonclickイベントに直接JQueryを追加する方がうまく機能しました。

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

数学関数を使用してこれを行うこともできます

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