jQuery 用显示和隐藏替换链接文本

【问题标题】：jQuery Replace Link Text with Show and HidejQuery 用显示和隐藏替换链接文本
【发布时间】：2015-03-11 12:18:35
【问题描述】：

我正在尝试使用 jQuery 将一些“显示更多”链接文本更改为“显示更少”。

我有created a jsfiddle 来说明我到目前为止所做的事情。当我点击“少显示”链接时，我还需要关闭内容。

jQuery(function(){
    jQuery('.reveal_more').click(function(){
        jQuery('.box').hide();
        jQuery('#item-'+jQuery(this).attr('target')).show();
    });
});

我想知道是否有人可以帮助我？ :)

【问题讨论】：

标签： jquery toggle show-hide

【解决方案1】：

您可以使用.text(function) 设置锚元素的文本，并根据其文本值使用.toggle( boolean) 显示/隐藏目标

代码

jQuery('.reveal_more').click(function(){
    jQuery('.box').hide();

    //Switch text              
    $(this).text(function(_, val){
        return val == "Show More" ? "Show Less" : "Show More"
    });

    //Toogle target element        
    jQuery('#item-'+jQuery(this).attr('target')).toggle($(this).text() == "Show Less");

});

DEMO

【讨论】：

感谢 Satpal。如果您单击一些“显示更多”链接，是否有可能关闭项目的文本可能会返回到“显示更多”而不是保留“显示更少”？
完美。谢谢你。 :)