jQuery 切换 - 点击时图标切换？

Question

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

注意：

我的演示代码运行良好，但我正在寻找类似的功能...如果我点击第一个 播放图标，它会改变。当我点击第二个 Play Icon 时，它会随着 Pause Icon 而变化，然后第一个 Pause Icon 会随着 Play Icon 而变化> 它会重复第三个图标。

演示代码：

$("#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 Toggle on click of image

How to jQuery toggle multiple images on different button click?

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>