使用 jQuery 切换文本答案

【问题标题】：Toggle Text with jQuery使用 jQuery 切换文本
【发布时间】：2010-12-01 17:04:38
【问题描述】：

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

这是我当前的代码：

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

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

到目前为止一切顺利。但是当点击“关闭”时，虽然颜色和面板恢复正常，但“关闭”这个词并没有变成“电子邮件”这个词。而不是 .text("Close") 我尝试了 .toggleText("class") 但似乎不起作用。有没有类似的东西我可以通过添加尽可能少的代码来完成它？谢谢！

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

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

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

【问题讨论】：

分享您的 html 会更容易提供帮助。

标签： jquery

【解决方案1】：

你可以试试：

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

    $(this).toggleClass("active");

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

});

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

H.t.h. :)

【讨论】：

哈，我刚刚用与您的解决方案几乎相同的解决方案更新了我的代码，但您的解决方案更干净。太好了。

【解决方案2】：

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

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

【讨论】：

这似乎是迄今为止最有效的选择。你们真快，谢谢伙计！
@heavymark ，如果你喜欢这个答案，你也可以投票给他和 makr 作为答案。

【解决方案3】：

这是上述答案的简写：

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

亚当

【讨论】：

即使这个.text($(this).text() == "Close" ? "Email" : "Close") 工作http://jsbin.com/mehur/2/

【解决方案4】：

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

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

.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();
    });
});

【讨论】：

【解决方案5】：

我认为（这个）搞砸了。您可能必须改用类名:)

前几天我也有同样的事情，如果你看到我的帖子：slideToggle jQuery function

【讨论】：

【解决方案6】：

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

$(this).text("电子邮件");

【讨论】：

【解决方案7】：

请试试这个……

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

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

【讨论】：

【解决方案8】：

也许一个简单的方法是：

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

【讨论】：

【解决方案9】：

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

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

【讨论】：