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

Question

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

该站点已经使用了 jquery。

谢谢!

Answer 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');
});