单击时 JQuery 更改文本（也更改回来）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21459599/
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
JQuery change text on click (Also change back)
提问by Shaul Bar-Lev
I have a div with a p inside it that says 'Fold it!'. When I click the div, the p's text changes to 'Expand it'. How can I make so when I click the div for the second time it will change back to 'Fold it'?
我有一个里面有 ap 的 div，上面写着“折叠它！”。当我单击 div 时，p 的文本更改为“展开它”。当我第二次单击 div 时，如何使它变回“折叠”？
HTML:
HTML：
<div id="fold">
<p id="fold_p">Fold it</p>
</div>
JQuery:
查询：
<script>
$(document).ready(function () {
$("#fold").click(function () {
$("#fold_p").text("Expand it");
} )
} );
</script>
Also, is it possible to make the transition a fade? Any help is much appreciated :)
另外，是否可以使过渡淡出？任何帮助深表感谢 ：）
回答by j08691
$(document).ready(function () {
$("#fold").click(function () {
$("#fold_p").fadeOut(function () {
$("#fold_p").text(($("#fold_p").text() == 'Fold it') ? 'Expand it' : 'Fold it').fadeIn();
})
})
});
回答by Arunkumar Srisailapathi
jQuery ("#fold") .click (function () {
if (jQuery (this).children ("#fold_p").text() == "Fold it") {
jQuery (this).children ("#fold_p").text("Expand It");
}
else {
jQuery (this).children ("#fold_p").text("Fold it");
}
});
Above is the sample code for your question.
以上是您问题的示例代码。
Here is the fiddle link: http://jsfiddle.net/teZQA/
这是小提琴链接：http: //jsfiddle.net/teZQA/
回答by Tushar Gupta - curioustushar
$(document).ready(function () {
var fold = $("#fold");
fold.cliked = 1;// set initial click value to 1
fold.click(function () {
//change text o base of even or odd
$("#fold_p").text((fold.cliked++ % 2 == 0) ? "Fold it" : "Expand it");
});
});
回答by Rami.Q
try this:
尝试这个：
<script>
$(document).ready(function () {
$("#fold").click( function (){
if($(this).hasClass("helperClass")){
$(this).find("p").text("Expand it");
}else{
$(this).find("p").text("Fold it");
}
$(this).toggleClass("helperClass");
});
});
</script>
