使用jQuery切换DIV背景图片

Question

我正在为我工作的公司制作一个可展开/折叠的通话费率表。目前，我已经有了一个带有按钮的表格来展开它，按钮上写着“展开”。它是可用的，但是当单击按钮时，我需要将按钮更改为“折叠”，然后当再次单击它时，将其更改回“展开”。按钮上的文字是背景图像。

所以基本上，所有我需要做的就是在单击时更改div的背景图像，类似于切换操作。

- zuk1

---

为什么需要一个背景图片？为什么不用文字？ - uınbɐɥs

我投了反对票，因为他几年前没有接受答案，但希望@user1040899没事！ - gsamaras

@user1040899 zuk1 上次出现在 SO 是 Aug 9 '10 at 0:42，可能就是这个原因，:( - M. Junaid Salaat

Answer 1

$('#divID').css("background-image", "url(/myimage.jpg)");  

这个应该能解决问题，只需要将它挂在元素的点击事件上即可。

$('#divID').click(function()
{
  // do my image switching logic here.
});

- Nick

---

@fuccboi，它确实可以，因为我使用这段代码在用户选择选项时触发了一个带动画的SVG勾号。 :) - norcal johnny

好的回答，我想指出>>url()是字符串的一部分<<，如果你来自一个强类型定义的语言，这真的很令人困惑。 - clockw0rk

Answer 2

我个人会使用JavaScript代码在2个类之间进行切换。

让CSS为您的

提供所需的所有轮廓（除了背景规则），然后添加两个类（例如：expanded和collapsed）作为规则，每个类都有正确的背景图像（如果使用精灵，则为背景位置）。

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和类进行操作会让我感到更加自在。

- Kelly

---

注意：优雅的toggleClass在Internet Explorer 6中不起作用。 - Chaoley

Answer 3

有两种不同的方法可以使用jQuery更改CSS背景图片。

1. $('选择器').css('backgroundImage','url(images/example.jpg)');
2. $('选择器').css({'background-image':'url(images/example.jpg)'});

请仔细观察以注意差异。在第二个方法中，您可以使用常规的CSS语法将多个CSS属性字符串连接在一起。

- Ecropolis

---

错误无效。将多个属性串起来的方法如下：$('选择器').css({'background-color':'yellow','background-image':'url()'})。 - codecowboy

如果我尝试2.的话，我会得到一个错误 - 未捕获的SyntaxError：意外的标记： - geeky_monster

正确，但我不得不使用整个路径才能使其工作！不起作用："url(../images/img.jpg)" - Flemming

Answer 4

如果您使用CSS精灵（CSS Sprite）作为背景图像，您可以根据扩展或折叠的情况下将背景偏移+/-n个像素。这不是一个切换，但比必须切换背景图像URL更接近。

- Dave Ward

---

奖励：如果您使用单独的图像，则仅在加载时显示的图像实际上被加载。在切换图像之前，第二个状态会有一小段延迟时间。使用精灵，您只有一个图像，并且它已经存在。 - Lasar

Answer 5

这是我做的方式：

CSS

#button{
   background-image: url("initial_image.png");
}

#button.toggled{
  background-image:url("toggled_image.png");
}

JavaScript

$('#button').click(function(){
  $('#my_content').toggle();
  $(this).toggleClass('toggled');
});

- Loupax

---

最终你可能会使用jQuery的.toggleClass()功能。 - Paulo Bueno

在我发了这个帖子两天后才发现了toggleClass。 :P - Loupax

Answer 6

一种实现方法是将两张图片放在HTML中的SPAN或DIV中，可以使用CSS或者JS在页面加载时隐藏其中一个默认图片，然后通过点击来切换显示。下面是我在列表中使用左/下图标的类似示例：

$(document).ready(function(){
    $(".button").click(function () {
        $(this).children(".arrow").toggle();
            return false;
    });
});

<a href="#" class="button">
    <span class="arrow">
        <img src="/images/icons/left.png" alt="+" />
    </span>
    <span class="arrow" style="display: none;">
        <img src="/images/down.png" alt="-" />
    </span>
</a>

- alexp206

Answer 7

我的是动画的：

$(this).animate({
    opacity: 0
}, 100, function() {
    // Callback
    $(this).css("background-image", "url(" + new_img + ")").promise().done(function(){
        // Callback of the callback :)
        $(this).animate({
            opacity: 1
        }, 600)
    });    
});

- yPhil

Answer 8

这适用于WinXP上所有当前的浏览器。基本上只是检查当前的背景图片是什么。如果是image1，则显示image2，否则显示image1。

jsapi的内容只是从Google CDN加载jQuery（更容易在桌面上测试杂项文件）。

replace是为了跨浏览器兼容性（opera和ie会向url添加引号，而firefox、chrome和safari会删除引号）。

<html>
    <head>
        <script src="http://www.google.com/jsapi"></script>
        <script>
          google.load("jquery", "1.2.6");
          google.setOnLoadCallback(function() {
            var original_image = 'url(http://stackoverflow.com/Content/img/wmd/link.png)';
            var second_image = 'url(http://stackoverflow.com/Content/img/wmd/code.png)';

            $('.mydiv').click(function() {
                if ($(this).css('background-image').replace(/"/g, '') == original_image) {
                    $(this).css('background-image', second_image);
                } else {
                    $(this).css('background-image', original_image);
                }

                return false;
            });
          });
        </script>

        <style>
            .mydiv {
                background-image: url('http://stackoverflow.com/Content/img/wmd/link.png');
                width: 100px;
                height: 100px;
            }
        </style>
    </head>
    <body>
        <div class="mydiv">&nbsp;</div>
    </body>
</html>

- enobrev

---

刚才为示例完成了这个操作。这样，整个代码片段就能独立工作了。 - enobrev

从 Google 加载更适合公共网站。Google 的 CDN 很可能比你的网站更快，可以允许同时下载其他内容，并且使用它的网站越多，用户浏览器中缓存的副本就越有可能被使用。 - Dave Ward

如果谷歌崩溃了，而我还活着，请告诉我。 - greenimpala

@Nick 前往jQuery.com，你会发现他们自己的网站使用 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>。 - user229044

@Nick 真正的问题应该是，为什么不想从谷歌加载它呢？ :-) - John Parker

Answer 9

我使用正则表达式来实现，因为我想要保留相对路径，而不是使用addClass函数。只是为了让它变得复杂，哈哈。

$(".travelinfo-btn").click(
            function() {
                $("html, body").animate({scrollTop: $(this).offset().top}, 200);
                var bgImg = $(this).css('background-image')
                var bgPath = bgImg.substr(0, bgImg.lastIndexOf('/')+1)
                if(bgImg.match(/collapse/)) {
                    $(this).stop().css('background-image', bgImg.replace(/collapse/,'expand'));
                    $(this).next(".travelinfo-item").stop().slideToggle(400);
                } else {
                    $(this).stop().css('background-image', bgImg.replace(/expand/,'collapse'));
                    $(this).next(".travelinfo-item").stop().slideToggle(400);
                }
            }
        );

- user2220104

Answer 10

虽然这篇文章有点旧，但你可以使用图片精灵并通过使用CSS属性的缩写（background、repeat、left top）来调整重复和位置。

$.each($('.smallPreview'), function(i){
  var $this = $(this);

  $this.mouseenter(function(){
    $this.css('background', 'url(Assets/imgs/imgBckg-Small_Over.png) no-repeat 0 0');
  });

  $this.mouseleave(function(){
    $this.css('background', 'url(Assets/imgs/imgBckg-Small.png) no-repeat 0 0');
  });

});

- bphillips