javascript 클릭 시 사진 블러 효과 제거 질문

javascript 클릭 시 사진 블러 효과 제거 질문

QA

javascript 클릭 시 사진 블러 효과 제거 질문

본문

3717085566_1579499762.1718.png

 

3717085566_1579500049.7429.png

 

이렇게 구현은 했는데, alert("activate") 는 작동을 하는데 밑에 있는 5가지 요소는 변함이 없습니다 ㅠㅠ

이 질문에 댓글 쓰기 :

답변 3

css 처리를 jquery로 하지마시고 

.images{기본 스타일 내용}

.blur{

       블러효과 스타일들 

}

 

<img src='~~.jpg' class='images blur'>

<script>

$(function(){

    $('.images').click(function(){

        $(this).removeClass('blur');

    });

});

</script>

 

이런식으로 처리해 보세요.

jquery css로 적용시키는 경우 해당 태그의 style=""에 해당 내용이 들어가게 되고 html 우선순위상 style에 입력된것을 적용하지만 해당 style에 아무 내용이 없으면 style을 입력하지 않은것이나 마찬가지입니다.
style에 해당 속성이 있는경우 의도한대로 동작이 되겠지만 클래스명에 속성이 들어가있는경우에는 제거가 되지 않습니다
.blur{}

라는 별도의 css를 만드시고 해당 부분에 블러가 적용되는 부분을 집어넣고 해당 이미지 클릭시 blur 클래스를 제거하는 형식으로 진행하시는게 깔끔합니다.

해당 이미지에는 img class="images blur" 로 사용하시구요.

일단 아래 5가지 요소의 시작을 $('.images')으로 하지 마시고 $(this) 으로 변경하세요.

그렇게 해서 안되면 'none' 하시고 그래도 안되면 'none !important' 하세요.

그래도 안되면 방법을 바꾸세요.

답변을 작성하시기 전에 로그인 해주세요.
전체 123,128 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT