Dor*_*şin 63 jquery button toggle
当我点击".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>
谢谢.
und*_*ned 180
你可以使用text方法:
$(function(){
$(".pushme").click(function () {
$(this).text(function(i, text){
return text === "PUSH ME" ? "DON'T PUSH ME" : "PUSH ME";
})
});
})
got*_*les 17
你也可以.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");
};
});
工作CodePen:在按钮中切换文本
使用 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];
});
}??????????????????????????????????????????????);?
演示:http://jsfiddle.net/DQK4v/2/
$(".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