Question

我有一个缩略图网格，当点击任何缩略图时，它会放大。

我可以实现这一点：打开图像（放大），然后再次单击将其恢复为正常大小。然后我再次点击，但它没有扩大。为什么会发生这种情况？我该如何解决这个问题？

$("#thumbs img").click(function() {
	$(this).addClass("enlarge");
	$("#thumbs img").click(function() {
		$(this).removeClass("enlarge");
	});
});

#thumbs {
   max-height: 400px;
   overflow-y: auto;
   cursor: pointer;
   width: 300px;
}

#thumbs > img {
   cursor: pointer;
   float: left;
   margin: 1px 1px 1px 1px;
}

.enlarge {
   transform:scale(3,3);
   transform-origin:0 0;
}

<div id="thumbs">        
   <img class="thumbnail" src='http://www.mariajuliaolivan.com.ar/wp-content/uploads/2013/12/random-1000x600.jpg' alt="arrow" height="40" width="60">
   <img class="thumbnail" src='http://www.mariajuliaolivan.com.ar/wp-content/uploads/2013/12/random-1000x600.jpg' alt="arrow" height="40" width="60">
   <img class="thumbnail" src='http://www.mariajuliaolivan.com.ar/wp-content/uploads/2013/12/random-1000x600.jpg' alt="arrow" height="40" width="60">
   <img class="thumbnail" src='http://www.mariajuliaolivan.com.ar/wp-content/uploads/2013/12/random-1000x600.jpg' alt="arrow" height="40" width="60">
   <img class="thumbnail" src='http://www.mariajuliaolivan.com.ar/wp-content/uploads/2013/12/random-1000x600.jpg' alt="arrow" height="40" width="60">
   <img class="thumbnail" src='http://www.mariajuliaolivan.com.ar/wp-content/uploads/2013/12/random-1000x600.jpg' alt="arrow" height="40" width="60">
   <img class="thumbnail" src='http://www.mariajuliaolivan.com.ar/wp-content/uploads/2013/12/random-1000x600.jpg' alt="arrow" height="40" width="60">
   <img class="thumbnail" src='http://www.mariajuliaolivan.com.ar/wp-content/uploads/2013/12/random-1000x600.jpg' alt="arrow" height="40" width="60">
   <img class="thumbnail" src='http://www.mariajuliaolivan.com.ar/wp-content/uploads/2013/12/random-1000x600.jpg' alt="arrow" height="40" width="60">
   <img class="thumbnail" src='http://www.mariajuliaolivan.com.ar/wp-content/uploads/2013/12/random-1000x600.jpg' alt="arrow" height="40" width="60">           
 </div>

Answer 1

点击活动中有点击事件？考虑使用toggleClass。

$("#thumbs img").click(function() {
    $(this).toggleClass("enlarge");
});

单击以打开图像，然后单击以关闭它

1 个答案: