使用jQuery切换DIV背景图像

Question

我正在为我工作的公司制作一个扩展/折叠呼叫率表。我目前有一个桌子，下面有个按钮来展开它，该按钮说“展开”。除了我需要在单击按钮时将按钮更改为“折叠”，然后在再次单击按钮时将其更改为“展开”之外，此功能正常。按钮上的文字是背景图像。因此，基本上，我需要做的就是在单击div时更改div的背景图像，除了像切换一样。

Answer 1

我个人只是使用JavaScript代码在2个类之间切换。

让CSS在div上勾勒出您需要的所有内容，然后减去背景规则，然后添加两个类（例如：展开和折叠）作为规则，每个类具有正确的背景图像（或背景位置（如果使用精灵））。

带有不同图像的CSS

.div {

    /* button size etc properties */

}

.expanded {background: url(img/x.gif) no-repeat left top;}

.collapsed {background: url(img/y.gif) no-repeat left top;}

或带有图片精灵的CSS

.div {

    background: url(img/sprite.gif) no-repeat left top;

    /* Other styles */

}

.expanded {background-position: left bottom;}

然后...

带图像的JavaScript代码

$(function){

    $('#button').click(function(){

        if($(this).hasClass('expanded'))

        {

            $(this).addClass('collapsed').removeClass('expanded');

        }

        else

        {

            $(this).addClass('expanded').removeClass('collapsed');

        }

    });

}

带精灵的JavaScript

注意：优雅的toggleClass在Internet Explorer 6中不起作用，但是下面的addClass/ removeClass方法在这种情况下也可以正常工作

最优雅的解决方案（不幸的是，Internet Explorer 6不友好）

$(function){

        $('#button').click(function(){

            $(this).toggleClass('expanded');

        });

    }

$(function){

        $('#button').click(function(){

            if($(this).hasClass('expanded'))

            {

                $(this).removeClass('expanded');

            }

            else

            {

                $(this).addClass('expanded');

            }

        });

    }

据我所知，此方法将可在所有浏览器中使用，并且与使用脚本中的URL更改相比，使用CSS和类玩起来更舒服。

Answer 2

有两种使用jQuery更改背景图像CSS的方法。

$('selector').css('backgroundImage','url(images/example.jpg)');

$('selector').css({'background-image':'url(images/example.jpg)'});

仔细查看以注意差异。在第二种方法中，您可以使用常规CSS并将多个CSS属性串在一起。