如何通过单击更改/交换 div 的背景图像？答案

【问题标题】：How to change/swap a div's background image with a click?如何通过单击更改/交换 div 的背景图像？
【发布时间】：2012-06-15 22:03:01
【问题描述】：

我正在尝试使用带有背景图像的 div 在网站上创建静音按钮（它已经具有 onclick 功能）。我希望能够在单击后更改显示的图像（静音），但我还需要在第二次单击后将其更改回来（取消静音）。如何做到这一点？

该站点已使用 jquery。

谢谢！

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

看看toggleClass()。您只需要两个 CSS 类，每个类都有一个背景图像，例如：

.mute {
  background-image:url('mute.png');
}

.unmute {
  background-image:url('unmute.png');
}

那么 jQuery 将是（假设你有一个名为“button”的 div，类为“unmute”）：

$('#button').click(function() {
    $(this).toggleClass('mute');
});

【讨论】：

【解决方案2】：

您需要 jQuery 的 .toggle()，它接受多个函数参数并在每次点击事件后依次调用每个参数。

$("#mutebutton").toggle(
    function() {
        $(this).css("background-image","url('on.jpg')");
        mySoundOn();
    },
    function() {
        $(this).css("background-image","url('off.jpg')");
        mySoundOff();
    }
);

【讨论】：

jQuery 是否会自动为您提供图像 URL 的“url(...)”包装器，或者是否有必要在调用中这样做？我不记得了。
像魅力一样工作！非常感谢！这可能是最简单的方法。就我而言，我需要交换这两个功能，因为默认情况下声音是打开的。

【解决方案3】：

如果背景图像是唯一的内联应用，则使用.removeAttr()。如果不是，则使用.css() 并将路径更改为原始背景图像。


$(this).toggle(function() {
   $(this).removeAttr('style');
},
function() {
   $(this).css("backgroundImage", "url(mute_img_path)");
});

【讨论】：

我认为使用.css("backgroundImage", "url(http://whatever)")会更好（例如，它会工作）。
<div> 元素的背景图像没有“src”属性。（哦，如果有，您可能希望使用“.prop()”而不是“.attr()”来设置它。）
@AndrewPeacock：OP 专门询问更改背景图像。
@Pointy 谢谢你，第一次误读了这个问题。太早了=/对不起OP！

【解决方案4】：

很简单

<div id="img-swap" />

xxxxxx_Off 是你的静音图像

$(function(){
  $("#img-swap").on('click', function() {
    if ($(this).attr("class") == "img-swap") {
      $(this).css("background-image","on.jpg");
    } else {
      $(this).css("background-image","off.jpg");
    }
    $(this).toggleClass("on");
  });
});

这会将点击图片从关闭切换为开启。您必须对包含 _off 和 _on 后缀的图像使用模式

【讨论】：

他想要切换<div> 的背景图片，而不是<img> 的“src”。
谢谢@AndrewPeacock 的澄清。我已将其更改为 on()