使用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”读作“切换打开”，一旦单击它，如何更改为“切换关闭”？

谢谢！

- caustic

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

演示代码

你可以在 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

- adeneo

---

谢谢，但我能否只设置切换关闭文本，让切换打开文本由锚文本设置？例如，我可以将锚文本设置为“搜索”，然后在javascript中将切换关闭文本设置为“关闭”吗？我之所以问这个问题，是因为我想要拥有多个切换div，而不必为它们所有单独编写jquery代码；我希望仅从锚点设置切换打开文本。谢谢！ - caustic

http://jsfiddle.net/Lddc5u89/1/ 查看问题，“Search”更改为“切换关闭” - caustic

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代码也保持了简洁和简单。

- Brewal

---

这个答案很好，仅仅因为维护的原因。谢谢！我喜欢在可能的情况下使用HTML和CSS代替JavaScript / jQuery。 - caustic