點擊打開圖片並點擊關閉它

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"); 
});