라이믹스질답게시판

js .not 질문

Lv4
코학
Extra Form
PHP PHP 7.2

 

 

body :not(.WR_body):not(.WR_bodybox):not(.WR_warring):not(.WR_container):not(.WR_container2)

:not(.WR_title):not(.WR_bodytext):not(.WR_button):not(.WR_button-left):not(.WR_button-right){

  filter: blur(2px);

  

}

위 css 효과를 버튼을 클릭하면 없애고 싶어서

 

function closePopup() {

    $('.WR_body').css('display','none');

    $('.WR_bodybox').css('display','none');

    $( 'body' ).not( '.WR_body' ).css( 'filter', 'none');

    $( 'body' ).not( '.WR_bodybox' ).css( 'filter', 'none');

    $( 'body' ).not( '.WR_warring' ).css( 'filter', 'none');

    $( 'body' ).not( '.WR_container' ).css( 'filter', 'none');

    $( 'body' ).not( '.WR_container2' ).css( 'filter', 'none');

    $( 'body' ).not( '.WR_title' ).css( 'filter', 'none');

    $( 'body' ).not( '.WR_bodytext' ).css( 'filter', 'none');

    $( 'body' ).not( '.WR_button' ).css( 'filter', 'none');

    $( 'body' ).not( '.WR_button_left' ).css( 'filter', 'none');

    $( 'body' ).not( '.WR_button_right' ).css( 'filter', 'none');

}

 

이렇게 했는데 안 없애지네요 혹시 뭐가 문제일까요?

위로 아래로
댓글 7
  • Lv36

    특정 클래스를 찍어서 속성을 지정하지 않고 왕창 예외처리를 해놓았네요.... ㅡ.ㅡ

     

    아무튼 지금 쓰고 계신 JS는 <body> 중에서 특정 클래스가 없는 것을 찾는데, 무력화시키시려고 하는 원본 CSS는 <body>의 자식 태그들 중에서 해당 클래스가 없는 것에 적용됩니다. body와 첫 번째 :not 사이에 빈 칸이 있잖아요. 서로 다른 태그를 바라보고 있는 거죠.

     

    복잡한 예외처리 대신 그냥 이렇게 하시면 어떨까요?

     

    body .WR_clicked {

        filter: none; /* 필요시 !important도 붙여보세요 */

    }

     

    그리고 클릭하면 필요한 곳에 addClass('WR_clicked'); 해주세요.

  • Lv36 Lv4
    $('body').not('.WR_body','.WR_bodybox','.WR_warring','.WR_container'
    ,'.WR_container2','.WR_title','.WR_bodytext','.WR_button','.WR_button_left','.WR_button_right')
    .css('filter','none');
    이렇게 수정하였는데 잘 안되네요

    제가 팝업 관련 만드는중인데
    팝업창 제외 블러 효과를 주고 클릭후 블러를 해제하는 과정에서 저 코드가 필요했습니다
    addClass로 한번 해봐야겠네요
  • Lv36 Lv4

    캡처.PNG.jpg원래 이페이지에서 계속하기를 눌르면 꺼지게 만들려고 해서

     

    2.PNG팝업창은 없앴는데

     블러 효과를 못 없애고 있네요 한번 addclass로 해보겠습니다.

  • Lv4 Lv36

    $('body').not(... 여기서부터 잘못된 겁니다. body의 자식 태그들 중에서 특정 클래스가 있거나 없는 것을 찾아야 하는데, 지금은 body 자체를 선택하고 계시잖아요. jQuery의 not() 함수는 find()처럼 자식 태그를 검색하는 것이 아니라, 앞에서 이미 선택해 놓은 태그들 중에서 원하지 않는 것을 걸러내는 용도입니다.

  • Lv36 Lv4

    아하 그렇군요 !

    그러면 자식중에 하나인 .childre()과 .not을 같이 중첩하는 방법이 있을까요?

  • Lv4 Lv36

    사실상 문서 내에 있는 모든 태그를 다 걸러내는 거라, 효율적으로 처리하기 어려울 것 같습니다.

    위에서 제안드린 것처럼 CSS를 좀더 잘 활용해 보세요.
    이건 어떨까요?

    body.noFilter

    :not(.WR_body):not(.WR_bodybox):not(.WR_warring):not(.WR_container):not(.WR_container2)
    :not(.WR_title):not(.WR_bodytext):not(.WR_button):not(.WR_button-left):not(.WR_button-right) {
        filter: none;
    }

    그리고 버튼 클릭시 body에다가 noFilter 클래스만 하나 추가해 주면 끝!

  • Lv36 Lv4

    그렇군요 감사합니다 !