jQueryの選択と非選択画像

Question

を私は私の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 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> 

以下のような画像は、DIVタグを設定している、私このスクリプトを追加して動作させましたが、ユーザーが外側をクリックしたときにこの画像の選択を解除するには、divタグを使用します。 私のjQueryの

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

は私を助けてください。 あなたが

Answer 1

使用stopPropagation()ユーザーがクリック画像の上に、それ以外の場合は、本体（または他の要素）上のクリックイベントをキャプチャし、（もしあれば）

$(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') 
     } 
    }); 
});