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

jQuery选择和取消选择图像

1 个答案: