jquery - 切换背景图像位置

Question

我有以下代码显示/隐藏 div，同时根据 div 是否显示更改文本：

$('#more').click(function() {
    $('#extra').slideToggle('fast');
    $('#more').text(function(_,txt) {
        return txt == 'More about us' ? 'Less about us' : 'More about us';
    });
    return false;
});

在#more链接上，我有一个向下的箭头（对于“更多关于我们”的文本，当 div 被隐藏时）但我想将此箭头更改为在 div 可见并且文本显示为“更少关于我们”时指向上方'。我怎样才能编辑上面的代码来做到这一点？

Answer 1

尝试

$('#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;
});

礼貌

单击链接时切换文本

Answer 2

我认为您可以创建两个 css 类，然后设置正确的类：

$('#more').removeClass("arrowdown");
$('#more').addClass("arrowup");

反之亦然，具体取决于您刚刚设置的文本。

Answer 3

最终使用了一些在上一个问题上更新的代码：

$('#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;
});