jQuery的按钮文字切换(Button text toggle in jquery)

当我点击“.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/

谢谢。

Answer 1:

您可以使用text方式：

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

http://jsfiddle.net/CBajb/

Answer 2:

你也可以使用.toggle()像这样：

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

在更多信息http://api.jquery.com/toggle-event/ 。

这样也使得它很容易改变文字或添加不止2不同的状态。

Answer 3:

使用自定义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：按钮切换文本

Answer 4:

有了这么多伟大的答案，我想我会折腾一个多混进去。这一次，不像其他人，将允许您循环通过任意数量的轻松消息：

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/

Answer 5:

使用if / else语句..或三元如果你了解它

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

http://jsfiddle.net/dFZyv/

Answer 6:

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

Answer 7:

我preffer下面的方式，它可以通过任何按钮来使用。

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

演示

Answer 8:

如果你正在使用的“值”设置按钮上的文字属性，你需要设置

$（本）.VAL（）

代替：

$（本）的.text（）

此外，在我的情况，它的工作更好地添加JQuery的指示到按钮的onclick事件：

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

Answer 9:

你也可以用数学函数来做到这一点

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

DEMO

文章来源: Button text toggle in jquery