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

Answer 2

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

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

Answer 3

如果背景图片是唯一应用于内联的思维，请使用.removeAttr()。如果没有，请使用.css()并更改原始背景图片的路径。


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

Answer 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的背景图像？

4 个答案: