1

背景画像付きの div を使用して、サイトにミュート ボタン (既に onclick 機能があります) を作成しようとしています。クリックした後に表示された画像を変更できるようにしたい (ミュート) が、2 回目のクリック (ミュート解除) 後に元に戻す必要もあります。これはどのように行うことができますか？

このサイトはすでに jquery を使用しています。

ありがとうございました！

4

4 に答える 4

7

toggleClass()を見てください。背景画像ごとに 1 つずつ、2 つの CSS クラスが必要です。

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

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

次に、jQueryは次のようになります（「ボタン」という名前のdivがあり、クラスが「ミュート解除」であると仮定）：

$('#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 に答える