使用jQuery切换文本

Question

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

这是我目前的代码:

    $(".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");
    var text = $(this).text() == 'Email' ? 'Close' : 'Email';
    $(this)
    .text(text)
    .toggleClass("active");
});

Answer 2

你可以尝试:

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

以下是上述答案的简写:

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

亚当