使用 jQuery 切换文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4326910/
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
Toggle Text with jQuery
提问by cchiera
I've found a a few articles here on this topic but none seem to answer exactly what I'm looking for.
我在这里找到了一些关于这个主题的文章，但似乎没有一篇文章能准确回答我正在寻找的内容。
Here is my current code:
这是我当前的代码：
$(".email-slide").click(function(){
$("#panel").slideToggle("slow");
$(this)
.text("Close")
.toggleClass("active");
});
When I select the word "Email" which has the class "email-slide" the top panel slides down, and the word "Email" turns to white, and the word "Email" turns into the word "Close".
当我选择具有“email-slide”类的“电子邮件”一词时，顶部面板向下滑动，“电子邮件”一词变为白色，“电子邮件”一词变为“关闭”一词。
All good so far. But when clicking "Close" though the color and panel go back to normal, the word "Close" does not turn back into the word "Email". Instead of .text("Close") I tried .toggleText("class") but it seems that does not work. Is there something similar I could do it accomplish it by adding the least amount of code possible? Thank you!
到目前为止一切都很好。但是当点击“关闭”虽然颜色和面板恢复正常时，“关闭”这个词不会变回“电子邮件”这个词。我尝试了 .toggleText("class") 而不是 .text("Close") 但它似乎不起作用。有没有类似的东西我可以通过添加尽可能少的代码来完成它？谢谢！
UPDATE - I am able to accomplish it by using the following code, but was hoping that would be a more efficient/shorter way of doing it. If not, let me know. Thanks!
更新 - 我可以通过使用以下代码来完成它，但希望这是一种更有效/更短的方法。如果没有，请告诉我。谢谢！
$(".email-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active");
});
$(".email-slide").toggle(function (){
$(this).text("Close")
}, function(){
$(this).text("Email")
});
回答by MacAnthony
You don't have anything that sets the text back to 'Email'. There isn't a toggle method for content. You will have to do a test and set the value accordingly.
您没有任何将文本设置回“电子邮件”的内容。没有内容的切换方法。您必须进行测试并相应地设置值。
$(".email-slide").click(function(){
$("#panel").slideToggle("slow");
var text = $(this).text() == 'Email' ? 'Close' : 'Email';
$(this)
.text(text)
.toggleClass("active");
});
回答by Kos
You could try:
你可以试试：
$(".email-slide").click(function() {
$("#panel").slideToggle("slow");
$(this).toggleClass("active");
if ($(this).text() == "Close")
$(this).text("Email")
else
$(this).text("Close");
});
Or instead of comparing the text()value, you can also test for $(this).hasClass("active").
或者text()，您还可以测试$(this).hasClass("active").
H.t.h. :)
哈 :)
回答by Adam Ring
Here is a shorthand for the above answer:
这是上述答案的简写：
$(".email-slide").click(function(){
$("#panel").slideToggle("slow");
$(this)
.text( ($(this).text() == 'Close' ? 'Email' : 'Close') )
.toggleClass("active");
});
Adam
亚当
回答by sealthreinhold
This is a method to swap text. It is an alternate approach to replacing text.
这是一种交换文本的方法。这是替换文本的另一种方法。
HTML
HTML
<div class="toggleAbout">
<h2 class="toggleOff">Click</h2>
<h2 class="toggleOn">Close</h2> <!-- this will be hidden at first -->
</div>
<div class="about">
<p>blah blah blah</p>
</div>
CSS
CSS
.toggleAbout h2.toggleOff { display: block; }
.toggleAbout h2.toggleOn { display: none; } /* this will be hidden at first */
.about { display: none; }
jQuery
jQuery
$('.toggleAbout h2').click(function()
{
$('.about').slideToggle('slow', function()
{
$('.toggleAbout h2').toggle();
});
});
回答by Ezequiel
maybe an easy way would be:
也许一个简单的方法是：
if ($(this).text() == 'Email')
$(this).text("Close");
else
$(this).text("Email");
回答by Mark Schultheiss
This is a really old question BUT:
这是一个非常古老的问题，但是：
$(".email-slide").click(function() {
$("#panel").slideToggle("slow");
$(this).text($(this).hasClass('active')?"Email":"C??lose")).toggleClass(??'active');
});
回答by benhowdle89
I think the (this) is screwing it up. You may have to use the class name instead :)
我认为（这个）把它搞砸了。您可能必须改用类名:)
I had the exact same thing the other day, if you see my post: slideToggle jQuery function
前几天我遇到了完全相同的事情，如果你看到我的帖子：slideToggle jQuery function
回答by Chandrakiran K S
I think JQuery don't have toggleText feature. You have to manually place the "Email" text there on close event.
我认为 JQuery 没有 toggleText 功能。您必须在关闭事件中手动放置“电子邮件”文本。
$(this).text("Email");
$(this).text("Email");
回答by Chandrakiran K S
Please try this...
请试试这个...
if($('.email-slide').attr('class') == 'inactive')
{
$('.email-slide').text('Email');
}
else
{
$('.email-slide').text('Close');
}
$('.email-slide').toggleClass('active');
