jQuery的選擇和取消選擇圖像

Question

我有圖像集div標籤像下面

<div style="width: 600px; background: #CCC;padding: 50px;" class="jjj"> 
<img src="http://www.nasa.gov/images/content/297522main_image_1244_946-710.jpg" class="ddd" width="200"/> 
<img src="http://www.nasa.gov/images/content/297522main_image_1244_946-710.jpg" class="ddd" width="200"/> 
<img src="http://www.nasa.gov/images/content/297522main_image_1244_946-710.jpg" class="ddd" width="200"/> 
</div> 

我的CSS是

<style> 
.ddd:hover{ 
      transform: scale(1.2); 
-ms-transform: scale(1.2); /* IE 9 */ 
-webkit-transform: scale(1.2); /* Safari and Chrome */ 
-o-transform: scale(1.2); /* Opera */ 
-moz-transform: scale(1.2); /* Firefox */ 
     } 

     .selectedd{ 
      transform: scale(1.2); 
-ms-transform: scale(1.2); /* IE 9 */ 
-webkit-transform: scale(1.2); /* Safari and Chrome */ 
-o-transform: scale(1.2); /* Opera */ 
-moz-transform: scale(1.2); /* Firefox */ 
border:2px inset silver; 
     } 
</style> 

，我需要選擇圖像時，它的用戶點擊（更改類），我添加了這個腳本和它的工作，但我怎麼能取消選擇這個圖像，當用戶點擊外側，我的意思是在div標籤。 我的jQuery

<script> 
$(function(){ 
    $('.ddd').click(function(){ 
     ff=this; 
     $('.ddd').removeClass('selectedd') 
     $(ff).addClass('selectedd') 
    }); 
    }); 
</script> 

請幫幫我。 謝謝

Answer 1

使用stopPropagation()當用戶點擊過的圖像，否則拍攝主體（或其他元素）的點擊事件，並刪除在圖像上selectedd類（如果有的話）

$(function(){ 
    var ff; 

    $('.ddd').on('click', function(evt) { 
     ff = $(this); 
     evt.stopPropagation(); 
     $('.ddd').removeClass('selectedd') 
     ff.addClass('selectedd') 
    }); 
    $('body').on('click', function() { 
     if (ff.length) { 
      ff.removeClass('selectedd') 
     } 
    }); 
});