美文网首页H5+JS程序员
jQuery实现点击开关图片切换

jQuery实现点击开关图片切换

作者: 祈澈菇凉 | 来源:发表于2017-11-08 17:38 被阅读253次

    原型大概是这样的

    image

    需求:点击右侧的蓝色眼睛,会变成

    关键代码:

    /* 实现图片切换 */
    
    $(".imgclick").toggle(function(){
    
    $(this).attr("src","img/close.png");
    
    },function(){
    
    $(this).attr("src","img/open.png");
    
    }).attr("src","img/open.png");
    

    其实原理很简单,就是利用toggle的参数切换不同函数。
    可以直接复制黏贴的demo

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
        </head>
    
        <body>
            <div>
                <img class="imgclick" src="img/close.png" />
            </div>
    
            <div>
                <img class="imgclick" src="img/close.png" />
            </div>
        </body>
        <script>
            /* 实现图片切换 */
            $(".imgclick").toggle(function() {
                $(this).attr("src", "img/close.png");
            }, function() {
                $(this).attr("src", "img/open.png");
            }).attr("src", "img/open.png");
        </script>
    
    </html>
    

    原文作者:祈澈姑娘
    技术博客:https://www.jianshu.com/u/05f416aefbe1

    90后前端妹子,爱编程,爱运营,爱折腾。
    坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。

    相关文章

      网友评论

      • 辉lazy:也可以用背景,切换两个class。
        这样不用麻烦后端修改js里的图片路径。
        如果js是单独的文件,我记得php好像还改不了!😄
      • bixin:利用toggle的参数切换不同函数:smile:

      本文标题:jQuery实现点击开关图片切换

      本文链接:https://www.haomeiwen.com/subject/kvyymxtx.html