Question

我需要在同一张图片上使用.click事件切换两张图片，并在1°影像和2°影像上设置回调功能。

我的目的是通过点击图片为我的网站创建一个简单的音频播放器，只有静音/取消静音功能。

我有“icontrue.png”和“iconfalse.png”。

“iconfalse”。上的CSS设置在“display：none”

这是html：

<img src="http://www.gastronomiasanfilippo.it/img/icontrue.png" id="true" class="show" />
<img src="http://www.gastronomiasanfilippo.it/img/iconfalse.png" id="false" class="hide"/>

这是css：

#false{

cursor:pointer;
}
#true{
cursor:pointer;
}
.show{display:inline;}
.hide{display:none;}

这是jquery：

$("#true").click(function(){
$(this).addClass("hide");
$("#false").css("display","inline");
});

使用此代码我无法通过点击事件切换图像并且无法具有回调功能，这样做的方法是什么？

这是jfiddle：http://jsfiddle.net/b9ykmtLp/

Answer 1

试试这个：

＆＃13;

var muted = false;
$("#mute-unmute").click(function () {
    muted = !muted;
    if (muted) {
        $(this).addClass("muted");
        // mute(true);
    } else {
        $(this).removeClass("muted");
        // mute(false);
    }
});

＆＃13;

#mute-unmute {
    width: 50px;
    height: 50px;
    background-image: url("https://cdn1.iconfinder.com/data/icons/warnings-and-dangers/400/Warning-02-512.png");
    cursor: pointer;
}

#mute-unmute.muted {
    background-image: url("https://cdn2.iconfinder.com/data/icons/web-and-apps-interface/32/Cancel-512.png");
}

＆＃13;

<div id="mute-unmute"></div>

＆＃13;

演示： http://jsfiddle.net/b9ykmtLp/20/

Answer 2

您可以使用jQuery＆＃39; .show()和.hide()，只需重复代码即可获得另一张图片（#false）。

jsFiddle：http://jsfiddle.net/b9ykmtLp/16/

$("#true").click(function(){
   $(this).hide();
  $("#false").show();
});

$("#false").click(function(){
   $(this).hide();
  $("#true").show();
});

Answer 3

当然有很多不同的方法可以做到这一点，但我能想到的最有效的方法是使用jQuery的toggle（）;函数 - http://api.jquery.com/toggle/这可以让你摆脱所有不必要的标记。在我的头脑中，我就是这样做的：

选择其中一个图像作为默认图像并隐藏另一个图像。然后将它们都包装在父div中，给该div一个语义名称，用jquery引用它并使用toggle（）;单击时切换其内容的可见性。简短而简单：

<强> HTML：

<div id="button">
  <img src="http://www.gastronomiasanfilippo.it/img/icontrue.png" class="default" />
  <img src="http://www.gastronomiasanfilippo.it/img/iconfalse.png"/>
</div>

<强> CSS：

#button img {
display: none;
}

#button img.default {
display: block;
}

<强> jQuery的：

$('#button').on('click', function(){
  $(this).find('img').toggle();
});

这是一个工作小提琴：

http://jsfiddle.net/b9ykmtLp/13/

使用jquery使用回调代码切换图像

3 个答案: