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")值。

H.t.h。：）

Answer 3

以上是上述答案的简写：

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

亚当

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

Answer 5

我认为（这个）搞砸了。您可能必须使用类名：）

如果你看到我的帖子，我前几天完全一样：slideToggle jQuery function

Answer 6

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

$（本）的.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');
});

使用jQuery切换文本

9 个答案: