当我单击“.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>
谢谢。
【问题讨论】：
你可以使用text方法：
$(function(){
$(".pushme").click(function () {
$(this).text(function(i, text){
return text === "PUSH ME" ? "DON'T PUSH ME" : "PUSH ME";
})
});
})
【讨论】：
html 函数中包含特定的html 不起作用吗？ jsfiddle.net/CBajb/18
PUSH ME 和DON'T PUSH ME 实际上是两个段落，那么有没有更简洁的方法呢？
conditon ? obj.par1 : obj.par2。另一种选择是切换元素的可见性。
i 指的是迭代的索引。我们必须接受第一个参数才能使用第二个参数。这就是函数的工作原理！也可以使用this.textContent 代替回调函数的第二个参数。基本上这里的text 等于this.currentText，其中this 指的是点击的.pushme 元素。
你也可以像这样使用.toggle()：
$(".pushme").toggle(function() {
$(this).text("DON'T PUSH ME");
}, function() {
$(this).text("PUSH ME");
});
更多信息请访问http://api.jquery.com/toggle-event/。
这种方式还可以很容易地更改文本或添加超过 2 个不同的状态。
【讨论】：
如果您只想将操作应用于该按钮，请尽可能使用自定义 ID。
<button class="pushDontpush">PUSH ME</button>
$("#pushDontpush").click(function() {
if ($(this).text() == "PUSH ME") {
$(this).text("DON'T PUSH ME");
} else {
$(this).text("PUSH ME");
};
});
工作代码笔：Toggle text in button
【讨论】：
如果你理解的话，使用 if/else 语句或三元语句
$(".pushme").click(function () {
var $el = $(this);
$el.text($el.text() == "DON'T PUSH ME" ? "PUSH ME": "DON'T PUSH ME");
});
【讨论】：
有这么多很棒的答案，我想我会再折腾一个。与其他的不同，这个可以让您轻松地循环浏览任意数量的消息：
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];
});
});
【讨论】：
$(".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
【讨论】：
我更喜欢下面的方式，任何按钮都可以使用。
<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');
});
});
【讨论】：
如果您使用 'value' 属性设置按钮文本，则需要设置
代替：
在我的情况下，将 JQuery 直接添加到按钮的 onclick 事件效果更好：
onclick="$(this).val(function (i, text) { return text == 'PUSH ME' ? 'DON'T PUSH ME' : 'PUSH ME'; });"
【讨论】：
你也可以使用数学函数来做到这一点
var i = 0;
$('#button').on('click', function() {
if (i++ % 2 == 0) {
$(this).val("Push me!");
} else {
$(this).val("Don't push me!");
}
});
【讨论】：
您可以使用更简单的解决方案，而不是将上述示例增加到无穷大：
var i=0;
$('#button').on('click', function() {
if(i == 0){
$(this).val("Don't push me!"); i = 1;
}else{
$(this).val("Push me!"); i = 0;
}
});
【讨论】：