使用jQuery单击锚后，更改锚的文本

Change text of anchor once it is clicked with jQuery

本文关键字：文本 jQuery 单击 使用      更新时间：2023-09-26

单击锚点时，我使用以下代码来显示/隐藏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"，一旦它被单击为"ToggleClose"，我如何更改它？

谢谢！

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

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

FIDDLE

要使用来自锚点的文本，您需要将其存储在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

你可以这样做：

演示

JS:

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

HTML:

<a href="#" class="show_hide">
    <span class="textopen">Toggle Open</span>
    <span class="textclose">Toggle Close</span>
</a>

CSS：

.textclose {display: none;}
.show_hide.open .textopen {display: none;}
.show_hide.open .textclose {display: inline;}

例如，出于维护目的，我个人更喜欢将文本保存在html中，而不是JS中。您的javascript也保持简洁。

相关文章：