开发者社区> 问答> 正文

jquery分别单击两次事件,一次单击小图如何实现大图?

jquery分别单击两次事件,一次单击小图如何实现大图?
二次单击小图如何把大图消失?

 <div class="m-photos">
 <ul class="m-photos-thumb">
    <li data-src="res/img/product/TB2aAFshpXXXXatXpXXXXXXXXXX_!!0-rate.jpg_400x400.jpg" data-isShown="">
        <img src="res/img/product/a1.jpg">
    </li>
     <li data-src="res/img/product/TB2aAFshpXXXXatXpXXXXXXXXXX_!!0-rate.jpg_400x400.jpg">
        <img src="res/img/product/a1.jpg">
    </li>
</ul>
    <div class="tm-m-photo-viewer">
        <img src="" alt="" >
    </div>
</div>
    $('.m-photos').on('click', 'li', function(e) {
        var $item = $(this),
            current= $item.addClass("tm-current").siblings().removeClass("tm-current"),
            $parents = $item.parents('.m-photos'),
            $img = $('.tm-m-photo-viewer img', $parents),
            imgSrc = $item.data('src'),
            isShown = $img.data('isShown');

        if (!imgSrc) return ;

        //  已经打开大图
        if (isShown) {
            $img.hide().removeAttr('src').data('isShown', false);
        }
        //  未打开大图
        else {
            //  其实如果想要更好的效果,可以建立一个 <img /> 并插入到
            //  <body /> 里,然后监听 `load` 和 `error` 事件,成功加载
            //  图片则显示,加载失败则给出提示
            $img.show().attr('src', imgSrc).data('isShown', true);
        }
    });

我是新手,表示不理解如何再次单击同样的事件把大图收回去
screenshot
天猫的评价下面是怎么做出来了,单击的时候显示大图,再单击就把大图收回去,
然后再单击第二个小图就大图切换到小图的。

展开
收起
小旋风柴进 2016-05-30 08:47:43 2011 0
1 条回答
写回答
取消 提交回答
  • $('.m-photos').on('click', 'li', function(e) {
        var $item = $(this),
            $parents = $item.parents('.m-photos'),
            $img = $('.tm-m-photo-viewer img', $parents),
            imgSrc = $item.data('src'),
            isShown = $img.data('isShown');
    
        if (!imgSrc) return ;
    
        //  已经打开大图
        if (isShown) {
            $img.hide().removeAttr('src').data('isShown', false);
        }
    
        //  未打开大图
        else {
    
            //  其实如果想要更好的效果,可以建立一个 <img /> 并插入到
            //  <body /> 里,然后监听 `load` 和 `error` 事件,成功加载
            //  图片则显示,加载失败则给出提示
            $img.show().attr('src', imgSrc).data('isShown', true);
        }
    2019-07-17 19:18:55
    赞同 展开评论 打赏
问答分类:
问答标签:
问答地址:
相关产品:
问答排行榜
最热
最新

相关课程

更多

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载