用jQuery單擊后更改錨文本

Question

我在使用以下代碼顯示/隱藏單擊錨點時的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';
    });
});

小提琴

要使用錨點中的​​文本，您可以將其存儲在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;
    });
});

小提琴

您也可以使用數據屬性在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;
    });
});

小提琴

Answer 2

你可以這樣做：

演示

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也保持簡潔。