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