单击链接时切换文本 [英] Toggle text when link is clicked

问题描述

我有以下代码将div(称为#extra)切换到视图中:

I have the below code that toggles a div (called #extra) into view:

$('#more').click(function() {
    $('#extra').slideToggle('fast');
    return false;
});

我的点击功能是此链接:

My click function is this link:

<a href="#" id="more">More about us</a>

当#extra div可见时，如何将关于我们的更多信息"文本更改为关于我们的更少信息"?单击相同的链接以隐藏div时，我希望将链接的文本改回以显示关于我们的更多信息".

How do I get that 'More about us' text to change to read 'Less about us' when the #extra div is visible? When the same link is clicked to hide the div, I'd like the text of the link to change back to read 'More about us'.

推荐答案

只需切换文本?

$('#more').click(function() {
    $('#extra').slideToggle('fast');
    $('#more').text(function(_,txt) {
        var ret='';

        if ( txt == 'More about us' ) {
           ret = 'Less about us';
           $(this).css('background','url(link/to/image1.png)');
        }else{
           ret = 'More about us';
           $(this).css('background','url(link/to/image2.png)');
        }
        return ret;
    });
    return false;
});

这篇关于单击链接时切换文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！