javascript - 使用 jQuery 单击后更改 anchor 文本

Question

我正在使用以下代码在单击 anchor 时显示/隐藏 div。

$(document).ready(function(){

    $(".slidingDiv").hide();
    $(".show_hide").show();

    $('.show_hide').click(function(){
        $(".slidingDiv").slideToggle();
    });

});

因此，当单击“show_hide”div 时，将显示“slidingDiv”。但是，单击“show_hide”div 后如何更改它的文本。例如。我希望“show_hide”显示为“Toggle Open”，单击它后如何更改为“Toggle Close”？

谢谢!

Answer 1

使用 text() 方法和回调为文本创建切换功能

$('.show_hide').click(function(){
    $(".slidingDiv").slideToggle();

    $(this).text(function(_, txt) {
        return txt === 'Toggle Open' ? 'Toggle Close' : 'Toggle Open';
    });
});

FIDDLE

要使用来自 anchor 的文本，您可以将其存储在 data() 中，如下所示

$('.show_hide').each(function() {
    $(this).data('default_text', $(this).text())
}).click(function(){
    $(".slidingDiv").slideToggle();

    var text = $(this).data('default_text');

    $(this).text(function(_, txt) {
        return txt === text ? 'Toggle Close' : text;
    });
});

FIDDLE

您也可以使用数据属性在 HTML 中定义替代文本

<a href="#" class="show_hide" data-close="Search Close">Search</a>

做

$('.show_hide').each(function() {
    $(this).data('default_text', $(this).text())
}).click(function(){
    $(".slidingDiv").slideToggle();

    var text = $(this).data('default_text');

    $(this).text(function(_, txt) {
        return txt === text ? $(this).data('close') : text;
    });
});

FIDDLE