jQuery jquery中的按钮文本切换
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13652835/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Button text toggle in jquery
提问by Dorukcan Ki?in
When i click ".pushme" button, it turns its text to "Don't push me". I want to turn the text again to "push me" when button is clicked again. How can i do that?
当我单击“.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>
Thanks.
谢谢。
回答by undefined
You can use textmethod:
您可以使用text方法：
$(function(){
$(".pushme").click(function () {
$(this).text(function(i, text){
return text === "PUSH ME" ? "DON'T PUSH ME" : "PUSH ME";
})
});
})
回答by gotohales
You could also use .toggle()like so:
你也可以.toggle()像这样使用：
$(".pushme").toggle(function() {
$(this).text("DON'T PUSH ME");
}, function() {
$(this).text("PUSH ME");
});
More info at http://api.jquery.com/toggle-event/.
更多信息请访问http://api.jquery.com/toggle-event/。
This way also makes it pretty easy to change the text or add more than just 2 differing states.
这种方式还可以很容易地更改文本或添加超过 2 种不同的状态。
回答by timbck2
Use a custom ID if possible if you would like to apply the action to only that button.
如果您只想将操作应用于该按钮，请尽可能使用自定义 ID。
HTML
HTML
<button class="pushDontpush">PUSH ME</button>
jQuery
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
工作 CodePen：在按钮中切换文本
回答by Sampson
With so many great answers, I thought I would toss one more into the mix. This one, unlike the others, would permit you to cycle through any number of messages with ease:
有这么多很棒的答案，我想我会再加入一个。与其他的不同，这个允许您轻松地循环浏览任意数量的消息：
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];
});
}??????????????????????????????????????????????);?
回答by ?????
Use an if/else statement.. or ternary if you understand it
使用 if/else 语句.. 或三元，如果你理解它
$(".pushme").click(function () {
var $el = $(this);
$el.text($el.text() == "DON'T PUSH ME" ? "PUSH ME": "DON'T PUSH ME");
});
回答by Art Knipe
$(".pushme").click(function () {
var button = $(this);
button.text(button.text() == "PUSH ME" ? "DON'T PUSH ME" : "PUSH ME")
});
This ternary operator has an implicit return.
If the expression before ?is trueit returns "DON'T PUSH ME", else returns "PUSH ME"
此三元运算符具有隐式返回。如果之前的表达式?是true它返回"DON'T PUSH ME"，否则返回"PUSH ME"
This if-else statement:
这个 if-else 语句：
if (condition) { return A }
else { return B }
has the equivalent ternary expression:
具有等效的三元表达式：
condition ? A : B
回答by Chris Halcrow
If you're setting the button text by using the 'value' attribute you'll need to set
如果您使用“值”属性设置按钮文本，则需要设置
- $(this).val()
- $(this).val()
instead of:
代替：
- $(this).text()
- $(this).text()
Also in my situation it worked better to add the JQuery direct to the onclick event of the button:
同样在我的情况下，将 JQuery 直接添加到按钮的 onclick 事件效果更好：
onclick="$(this).val(function (i, text) { return text == 'PUSH ME' ? 'DON'T PUSH ME' : 'PUSH ME'; });"
回答by Ricardo Alvaro Lohmann
I preffer the following way, it can be used by any 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');
});
});
