使用jQuery切换文本

我在这里找到了一些关于这个主题的文章，但似乎都没有回答我正在寻找的内容。

这是我目前的代码：

$(".email-slide").click(function(){ $("#panel").slideToggle("slow"); $(this) .text("Close") .toggleClass("active"); }); 

当我选择具有“电子邮件幻灯片”类的“电子邮件”一词时，顶部面板向下滑动，单词“电子邮件”变为白色，单词“电子邮件”变成单词“关闭”。

到目前为止都很好。 但是当点击“关闭”但颜色和面板恢复正常时，“关闭”一词不会变回“电子邮件”这个词。 我试过.toggleText（“class”）而不是.text（“关闭”），但它似乎不起作用。 是否有类似的东西，我可以通过添加尽可能少的代码来实现它？ 谢谢！

更新 – 我能够通过使用以下代码来完成它，但希望这将是一种更有效/更短的方式。 如果没有，请告诉我。 谢谢！

 $(".email-slide").click(function(){ $("#panel").slideToggle("slow"); $(this).toggleClass("active"); }); $(".email-slide").toggle(function (){ $(this).text("Close") }, function(){ $(this).text("Email") }); 

Answer 1

你可以尝试：

 $(".email-slide").click(function() { $("#panel").slideToggle("slow"); $(this).toggleClass("active"); if ($(this).text() == "Close") $(this).text("Email") else $(this).text("Close"); }); 

或者，不是比较text()值，还可以测试$(this).hasClass("active") 。

Hth 🙂

Answer 2

您没有任何将文本设置回“电子邮件”的内容。 内容没有切换方法。 您必须进行测试并相应地设置值。

 $(".email-slide").click(function(){ $("#panel").slideToggle("slow"); var text = $(this).text() == 'Email' ? 'Close' : 'Email'; $(this) .text(text) .toggleClass("active"); }); 

Answer 3

以下是上述答案的简写：

 $(".email-slide").click(function(){ $("#panel").slideToggle("slow"); $(this) .text( ($(this).text() == 'Close' ? 'Email' : 'Close') ) .toggleClass("active"); }); 

亚当

Answer 4

这是一种交换文本的方法。 这是替换文本的替代方法。

HTML

 
 
Click
 
Close
  
 
 
blah blah blah
  

CSS

 .toggleAbout h2.toggleOff { display: block; } .toggleAbout h2.toggleOn { display: none; } /* this will be hidden at first */ .about { display: none; } 

jQuery的

 $('.toggleAbout h2').click(function() { $('.about').slideToggle('slow', function() { $('.toggleAbout h2').toggle(); }); }); 

Answer 5

我认为（这）搞砸了。 你可能不得不使用类名:)

如果你看到我的post： slideToggle jQuery函数 ，那我前几天完全一样

Answer 6

我认为JQuery没有toggleTextfunction。 您必须在关闭事件中手动放置“电子邮件”文本。

$（本）的.text（ “电子邮件”）;

Answer 7

请试试这个……

 if($('.email-slide').attr('class') == 'inactive') { $('.email-slide').text('Email'); } else { $('.email-slide').text('Close'); } $('.email-slide').toggleClass('active'); 

Answer 8

也许一个简单的方法是：

 if ($(this).text() == 'Email') $(this).text("Close"); else $(this).text("Email"); 

Answer 9

这是一个非常古老的问题但是：

 $(".email-slide").click(function() { $("#panel").slideToggle("slow"); $(this).text($(this).hasClass('active')?"Email":"C‌​lose")).toggleClass(‌​'active'); });