button文本在jQuery中切换

当我点击“.pushme”button时,它的文字变成“别逼我”。 当再次点击button时,我想再次将文本转到“推送我”。 我怎样才能做到这一点?

<html> <head> <script src="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/

谢谢。

你可以使用text方法:

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

http://jsfiddle.net/CBajb/

你也可以使用.toggle()如下所示:

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

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

这种方式也使得改变文本或添加不止两种不同的状态变得相当容易。

如果可能的话,请使用自定义ID来仅将该操作应用于该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"); }; }); 

工作CodePen: 在button中切换文本

有了这么多好的答案,我想我会再投入一个混合。 这一个,不像其他的,可以让你轻松地循环任何数量的消息:

 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/

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

我以下面的方式说明,它可以被任何button使用。

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

演示

如果您使用“值”属性设置button文字,则需要设置

  • $(本).VAL()

代替:

  • $(本)的.text()

另外在我的情况下,最好将JQuery直接添加到button的onclick事件中:

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

这个三元运算符有一个隐含的返回。 如果之前的expression?true它返回"DON'T PUSH ME" ,否则返回"PUSH ME"

这个if-else语句:

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

具有等同的三元expression式:

 condition ? A : B 

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

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

DEMO