jQuery 如何在 2 个图像之间切换

How can I toggle between 2 images

提问by Dan Farrell

Im trying to use this code to toggle between a play and pause button but it doesn't seem to be working. How can I get it toggle between the 2 images when the are clicked

我试图使用此代码在播放和暂停按钮之间切换，但它似乎不起作用。单击时如何在 2 个图像之间切换

http://jsfiddle.net/aFzG9/1/

http://jsfiddle.net/aFzG9/1/

$("#infoToggler").click(function()
{
    if($(this).html() == "<img src="http://tympanus.net/PausePlay/images/play.png" width="60px" height="60px"/>")
    {
        $(this).html("<img src="http://maraa.in/wp-content/uploads/2011/09/pause-in-times-of-conflict.png width="60px" height="60px"/>");
    }
    else
    {
        $(this).html("<img src="http://tympanus.net/PausePlay/images/play.png" width="60px" height="60px"/>");
    }
});

Thanks

谢谢

回答by Roko C. Buljan

Pure HTML/CSS

纯 HTML/CSS

label.tog > input {
  display: none; /* Hide the checkbox */
}

label.tog > input + span {
  text-indent: -9000px; /* Make text Accessible but not visible */
  display: inline-block;
  width: 24px;
  height: 24px;
  background: center / contain no-repeat url("//i.stack.imgur.com/gmP6V.png"); /*Play*/
}

label.tog > input:checked + span {
  background-image: url("//i.stack.imgur.com/ciXLl.png"); /*Pause*/
}

<label class="tog">
   <input type="checkbox" checked>
   <span>Button Play Pause</span>
</label>

---

---

Toggle inner span's images using jQuery

使用 jQuery 切换内部跨度的图像

Useful cause there's no new request to the server to load images:

有用的原因是没有向服务器发出加载图像的新请求：

<span class="tog">
   <img src="play.png">
   <img src="pause.png" style="display:none;">
</span>

$(".tog").click(function(){
  $('img',this).toggle();
});

---

---

Or, let's say we have this HTML and the .togimage selector:

或者，假设我们有这个 HTML 和.tog图像选择器：

<img class="tog" src="play.png"/>

Using Array.prototype.reverse()

使用 Array.prototype.reverse()

var togSrc = [ "play.png", "pause.png" ];

$(".tog").click(function() {
   this.src =  togSrc.reverse()[0];
});

---

---

Using the current srcvalue and String.prototype.match()

使用当前src值和String.prototype.match()

Useful if you don't know the initial state (play? pause?)

如果您不知道初始状态（播放？暂停？）

var togSrc = [ "play.png", "pause.png" ];

$(".tog").click(function() {
  this.src = togSrc[ this.src.match('play') ? 1 : 0 ];
});

NOTE:for the last two examples you need to pre-load your images, to prevent the time-gap the browsers makes to request and load a new image from the server.

注意：对于最后两个示例，您需要预加载图像，以防止浏览器从服务器请求和加载新图像的时间间隔。

回答by lucuma

A different maybe easier way to handle it:

一种不同的可能更简单的方法来处理它：

http://jsfiddle.net/M9QBb/1/

http://jsfiddle.net/M9QBb/1/

$("#infoToggler").click(function() {
    $(this).find('img').toggle();
});?

<div id="infoToggler">
  <img src="image1.png" width="60px" height="60px"/>
  <img src="image2.png" width="60px" height="60px" style="display:none"/>
</div>

回答by Nadh

You can use the .toggle()function. I've updated your fiddle. Also, you hadn't escaped the quotes properly in your image tags.

您可以使用该.toggle()功能。我已经更新了你的小提琴。此外，您没有在图像标签中正确转义引号。

$("#infoToggler").toggle(function() {
    $(this).html('<img src="http://maraa.in/wp-content/uploads/2011/09/pause-in-times-of-conflict.png" width="60px" height="60px"/>');
}, function() {
    $(this).html('<img src="http://tympanus.net/PausePlay/images/play.png" width="60px" height="60px"/>');
});?

回答by chella

<div id="infoToggler"><img src="http://tympanus.net/PausePlay/images/play.png" width="60px" height="60px"/></div>
$(document).ready(function(){
var src1 = "http://tympanus.net/PausePlay/images/play.png";
var src2 = "http://maraa.in/wp-content/uploads/2011/09/pause-in-times-of-conflict.png";
$("#infoToggler").click(function(){
   var src = $('#infoToggler img').attr('src'); 
   if(src == src1){$('#infoToggler img').attr('src',src2);}
   else{$('#infoToggler img').attr('src',src1);}
});

})?

}）？

it's working, i had checked..

它正在工作，我已经检查过..