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);
}
});
我是新手,表示不理解如何再次单击同样的事件把大图收回去
天猫的评价下面是怎么做出来了,单击的时候显示大图,再单击就把大图收回去,
然后再单击第二个小图就大图切换到小图的。
$('.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);
}
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。