1

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

该站点已经使用 jquery。

谢谢！

4

4 回答 4

7

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

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

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

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

$('#button').click(function() {
    $(this).toggleClass('mute');
});
于 2012-06-15T13:57:28.530 回答
4

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

$("#mutebutton").toggle(
    function() {
        $(this).css("background-image","url('on.jpg')");
        mySoundOn();
    },
    function() {
        $(this).css("background-image","url('off.jpg')");
        mySoundOff();
    }
);
于 2012-06-15T13:59:37.807 回答
0

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


$(this).toggle(function() {
   $(this).removeAttr('style');
},
function() {
   $(this).css("backgroundImage", "url(mute_img_path)");
});
于 2012-06-15T13:56:27.487 回答
-1

这简单

<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 后缀的图像使用模式

于 2012-06-15T13:56:26.630 回答