7

このコードを使用して再生ボタンと一時停止ボタンを切り替えようとしていますが、機能していないようです。クリックしたときに2つの画像を切り替えるにはどうすればよいですか

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"/>");
    }
});

ありがとう

4

4 に答える 4

19

純粋な 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>

jQueryを使用して内部スパンの画像を切り替えます

画像をロードするためのサーバーへの新しいリクエストがないという有用な原因:

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


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

または、次の HTML と.tog画像セレクターがあるとします。

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

Array.prototype.reverse() の使用

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

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

現在のsrc値を使用し、String.prototype.match()

初期状態がわからない場合に便利 (再生? 一時停止?)

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

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

注:最後の 2 つの例では、画像を事前に読み込む必要があります。これは、ブラウザーがサーバーから新しい画像を要求して読み込むために発生するタイム ギャップを防ぐためです。

于 2012-05-05T14:05:04.767 に答える
18

それを処理する別のおそらくより簡単な方法：

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>
于 2012-05-05T15:02:59.443 に答える
2 
<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);}
});

}) </p>

それは働いています、私はチェックしました..

于 2012-05-05T14:10:25.303 に答える
1

機能を使用できます.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"/>');
});​
于 2012-05-05T14:03:12.077 に答える