jQueryトグルスイッチ - クリック時のアイコン？

Question

jQueryトグルを作成しようとしています。再生&アイコンを一時停止します。アイコンonClickを切り替えたいと思います。

注：

私のデモは、コード細かい作業が、私は機能のようなを探していますが...私は最初再生アイコンをクリックし、それが変更されます。私は2番目再生アイコンをクリックしたとき、それは最初一時停止アイコンが再生アイコンに変更されます一時停止アイコンで変化しますし、それは3番目のアイコンで繰り返されます。

デモコード：

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="infoToggler"><img src="http://c28.imgup.net/play-icon223d.png" width="60px" height="60px"/> 
 
<img src="http://e52.imgup.net/stop-icon731e.png" width="60px" height="60px" style="display:none"/> 
 
</div> 
 

 
<div id="infoToggler2"><img src="http://c28.imgup.net/play-icon223d.png 
 
" width="60px" height="60px"/> 
 
<img src="http://e52.imgup.net/stop-icon731e.png" width="60px" height="60px" style="display:none"/> 
 
</div> 
 

 
<div id="infoToggler3"><img src="http://c28.imgup.net/play-icon223d.png" width="60px" height="60px"/> 
 
<img src="http://e52.imgup.net/stop-icon731e.png" width="60px" height="60px" style="display:none"/> 
 
</div>

私は、スタックオーバーフローの上にこれらのリンクを発見したが、彼らは私が探しているものではありませんね。

jQuery Toggle on click of image

How to jQuery toggle multiple images on different button click?

Answer 1

まず、クラスではなく、IDを持つ仕事、そしてあなただけの複数の、1つのハンドラをする必要はありません。だから、Divsにクラスを与えてください。

次に、「リセット」画像に1つのクラスを与え、もう1つのクラスに別のクラスを与えます。これにより、他のものをリセットすることができます。

あなたは、そのdiv要素で画像を切り替えると、他のすべてをリセットするためのdivにハンドラを追加することができます。

$(".toggler").click(function() { 
 
    
 
     // Reset all images 
 
     $(".toggler img.alt").hide(); 
 
     $(".toggler img.orig").show(); 
 
     
 
     // Now toggle the ones in this .toggler 
 
     $("img", this).toggle(); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<div class='toggler'> 
 
     <img class='orig' src="http://c28.imgup.net/play-icon223d.png" width="60px" height="60px"/> 
 
     <img class='alt' src="http://e52.imgup.net/stop-icon731e.png" width="60px" height="60px" style="display:none"/> 
 
    </div> 
 

 
    <div class='toggler'> 
 
     <img class='orig' src="http://c28.imgup.net/play-icon223d.png" width="60px" height="60px"/> 
 
     <img class='alt' src="http://e52.imgup.net/stop-icon731e.png" width="60px" height="60px" style="display:none"/> 
 
    </div> 
 

 
    <div class='toggler'> 
 
     <img class='orig' src="http://c28.imgup.net/play-icon223d.png" width="60px" height="60px"/> 
 
     <img class='alt' src="http://e52.imgup.net/stop-icon731e.png" width="60px" height="60px" style="display:none"/> 
 
    </div>