0

私は以下のような画像セット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>

私を助けてください。ありがとうございました

4

1 に答える 1

3

ユーザーが画像をクリックしたときに使用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')
        }
    });
});
于 2012-05-09T12:36:13.273 に答える