69

当我单击“.pushme”按钮时,它会将其文本变为“不要推我”。当再次单击按钮时,我想再次将文本变为“推我”。我怎样才能做到这一点?

<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

Use a custom ID if possible if you would like to apply the action to only that button.

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: Toggle text in button

于 2012-11-30T20:44:20.610 回答
6

Use an if/else statement.. or ternary if you understand it

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

有这么多很好的答案,我想我会再扔一个。与其他人不同,这一个允许您轻松地循环浏览任意数量的消息:

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

如果您使用“值”属性设置按钮文本,则需要设置

  • $(this).val()

代替:

  • $(this).text()

同样在我的情况下,将 JQuery 直接添加到按钮的 onclick 事件效果更好:

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 回答