如何通过点击更改/交换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');
});