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"; }) }); })
你也可以使用.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"); });
我以下面的方式说明，它可以被任何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
