69

「.pushme」ボタンをクリックすると、テキストが「Don'tpushme」に変わります。ボタンをもう一度クリックしたときに、テキストをもう一度回して「プッシュミー」にします。どうやってやるの？

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

ありがとう。

4

9 に答える 9

206

text次の方法を使用できます。

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

http://jsfiddle.net/CBajb/

于 2012-11-30T20:42:40.747 に答える
20

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

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

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

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

于 2012-11-30T20:46:58.880 に答える
12

そのボタンのみにアクションを適用する場合は、可能であればカスタム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"); 
    }; 
});

動作中のCodePen：ボタンのテキストを切り替えます

于 2012-11-30T20:44:20.610 に答える
6

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/

于 2012-11-30T20:43:11.643 に答える
5

たくさんの素晴らしい答えがあったので、もう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/

于 2012-11-30T21:01:36.073 に答える
3 
$(".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
于 2016-05-13T09:08:30.567 に答える
2

私は次の方法を好みます、それはどんなボタンでも使うことができます。

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

デモ

于 2012-11-30T20:47:44.763 に答える
2

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

  • $（this）.val（）

それ以外の：

  • $（this）.text（）

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

onclick="$(this).val(function (i, text) { return text == 'PUSH ME' ? 'DON'T PUSH ME' : 'PUSH ME'; });"
于 2013-10-23T04:10:21.533 に答える
1

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

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

デモ

于 2016-04-23T17:21:34.280 に答える