Question

我如何通过javascript单击来模糊除一个元素populate: Transition { id: addTrans SequentialAnimation { PropertyAction { property: "visible" value: false } PauseAnimation { duration: (addTrans.ViewTransition.index - addTrans.ViewTransition.targetIndexes[0]) * 100 } PropertyAction { property: "visible" value: true } NumberAnimation { property: "scale"; from: 0; to: 1 } } }之外的所有内容并进行切换，我尝试了此操作但不起作用

.personalPhoto

    function photoCheck(){
        $('.personalPhoto').click(function(){
            $(this).toggleClass('aaasssddd');
            if($(this).hasClass('aaasssddd')){
                $(this).css({'transform':'scale(2.5)'});
                $(window > this).css({'filter':'blur(2px)'});
            } else {
                 $(this).css({'transform':'scale(1)'});
            }
        })
    }
    photoCheck();

Answer 1

您只切换一张照片的模糊性，而不切换其他所有照片的模糊性。所以你想要这样的东西：

function photoCheck(){
    $('.personalPhoto').click(function(){
        // blur all the photos
        $('.personalPhoto').each(function() {
            $(this).css({'transform':'scale(2.5)'});
            $(window > this).css({'filter':'blur(2px)'});
        });
        // then unblur the clicked photo
        $(this).css({'transform':'scale(1)'});
        $(window > this).css({'filter':'blur(0)'});
    })
}
photoCheck();

Answer 2

您可以选择所有类为.personalPhoto的元素除 this之一，然后对其进行模糊处理：

function photoCheck(){
    $('.personalPhoto').click(function(){
        $(this).toggleClass('aaasssddd');
        $('.personalPhoto').not($(this)).css({'filter':'blur(2px)'});
    });
}
photoCheck();

模糊除一格之外的所有内容

2 个答案: