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

click to open image and click to close it

本文关键字：单击 图像 然后      更新时间：2023-09-26

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

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

$("#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>

您在点击事件中有点击事件？ 考虑使用 toggleClass。

$("#thumbs img").click(function() {
    $(this).toggleClass("enlarge");
});
相关文章：