Question

我正在尝试创建一个jQuery切换Play＆amp;暂停图标，我想切换点击图标。

注意：

我的演示代码工作正常，但我正在寻找类似的功能...如果我点击了第一个播放图标，它就会改变。当我点击第二个播放图标时，它会随着暂停图标而改变，然后第一个暂停图标会随着播放图标并将以第三个图标重复。

演示代码：

＆＃13;
＆＃13;
$("#infoToggler").click(function() { $(this).find('img').toggle(); }); $("#infoToggler2").click(function() { $(this).find('img').toggle(); }); $("#infoToggler3").click(function() { $(this).find('img').toggle(); });
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

我在Stack Overflow上找到了这些链接，但它们并不是我所寻找的。
jQuery Toggle on click of image

How to jQuery toggle multiple images on different button click?

Answer 1

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

接下来，重置＆＃39;重置＆＃39;形象一类，另一类不同。这允许您重置其他。

然后，您可以向div添加处理程序以切换该div中的图像并重置所有其他图像：

＆＃13;

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

＆＃13;

<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>

＆＃13;

jQuery切换开关 - 点击图标？

1 个答案: