使用jQuery切换文本

我在这里找到了一些关于这个主题的文章，但似乎没有一篇能完全回答我的问题

这是我目前的代码：

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

当我选择“Email”一词时，它的类为“Email slide”，顶部面板向下滑动，“Email”一词变为白色，“Email”一词变为“Close”

到目前为止一切都很好。但当点击“关闭”时，尽管颜色和面板恢复正常，“关闭”一词不会变回“电子邮件”一词。我尝试了.toggleText（“类”）而不是.text（“关闭”），但似乎不起作用。我是否可以通过添加尽可能少的代码来完成类似的工作？谢谢大家!

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

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

$(".email-slide").toggle(function (){
    $(this).text("Close")
}, function(){
    $(this).text("Email")
});

我认为（这件事）搞砸了。您可能必须改用类名：）

前几天我也做了同样的事情，如果你看到我的帖子：

你可以试试：

$(".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”）

---

H.t.H.：）

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

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

---

我认为JQuery没有toggleText特性。您必须在关闭事件时手动将“电子邮件”文本放置在此处

$（此）.text（“电子邮件”）

请试试这个

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

$('.email-slide').toggleClass('active');

---

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

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>

jQuery

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

---

也许一个简单的方法是：

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

---

以下是上述答案的简写：

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

---

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

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

---

分享你的html会让帮助变得更容易。哈，我刚刚用一个与你的解决方案几乎相同的解决方案更新了我的代码，但是你的更干净。太好了。这似乎是目前为止最有效的选择。你们太快了，谢谢@heavymark，如果你喜欢答案，你也可以投票给他和makr作为答案。即使这个

.text（$（this.text（）==“Close”？“Email:“Close”）

也可以

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