jQuery切换-单击图标即可打开吗？

Question

我正在尝试创建一个jQuery切换播放和暂停图标，我想切换图标onClick。

注意：

我的演示代码运行正常，但是我正在寻找类似...的功能，如果我单击第一个“ 播放”图标，它将改变。当我单击第二个“ 播放图标”时，它将更改为“ 暂停图标”，然后第一个“ 暂停图标”将更改为“ 播放图标”，然后将与第三个图标重复。

演示代码：

$("#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>

我在Stack Overflow上找到了这些链接，但它们不是我想要的。

jQuery点击图片

jQuery如何在不同的按钮单击上切换多个图像？

Answer 1

首先，使用类而不是 ID，然后您只需要一个处理程序，而不是多个。所以，给div们上一堂课。

接下来，将“重置”图像指定为一个类，将另一个指定为不同的类。这允许您重置其他的。

然后，您可以向 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>