点击打开图片并点击关闭它

Question

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

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

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

#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

你有一个click事件的单击事件？考虑使用toggleClass。

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