Question

我在点击锚点时使用以下代码显示/隐藏div。

$(document).ready(function(){

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

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

});

所以，当＆＃39; show_hide＆＃39;单击div，＆＃39; slidingDiv＆＃39;显示。但是，我怎样才能更改“show_hide”的文字。 div一旦被点击。例如。我想＆＃39; show_hide＆＃39;阅读＆＃39;切换打开＆＃39;如何点击“切换关闭”后如何更改？？

谢谢！

Answer 1

使用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

Answer 2

你可以这样做：

<强> demo

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也保持简洁。

用jQuery单击后更改锚文本

2 个答案: