javascript 클릭 시 사진 블러 효과 제거 질문
본문
이렇게 구현은 했는데, alert("activate") 는 작동을 하는데 밑에 있는 5가지 요소는 변함이 없습니다 ㅠㅠ
답변 3
css 처리를 jquery로 하지마시고
.images{기본 스타일 내용}
.blur{
블러효과 스타일들
}
<img src='~~.jpg' class='images blur'>
<script>
$(function(){
$('.images').click(function(){
$(this).removeClass('blur');
});
});
</script>
이런식으로 처리해 보세요.
removeClass()를 사용해서 css를 개별적이지 않고 class 단위로 제거하는게 효과적이네요!! 감사합니다!!
jquery css로 적용시키는 경우 해당 태그의 style=""에 해당 내용이 들어가게 되고 html 우선순위상 style에 입력된것을 적용하지만 해당 style에 아무 내용이 없으면 style을 입력하지 않은것이나 마찬가지입니다.
style에 해당 속성이 있는경우 의도한대로 동작이 되겠지만 클래스명에 속성이 들어가있는경우에는 제거가 되지 않습니다
.blur{}
라는 별도의 css를 만드시고 해당 부분에 블러가 적용되는 부분을 집어넣고 해당 이미지 클릭시 blur 클래스를 제거하는 형식으로 진행하시는게 깔끔합니다.
해당 이미지에는 img class="images blur" 로 사용하시구요.
조언 주신대로 css를 적용하니까 되네요!!
removeClass() 를 사용해서 css를 수정하지 않고 블러 효과주는 클래스를 삭제하는 방법으로 하니까 성공했습니다!!
조언 주신대로 css를 적용하니까 되네요!!
removeClass() 를 사용해서 css를 수정하지 않고 블러 효과주는 클래스를 삭제하는 방법으로 하니까 성공했습니다!!
일단 아래 5가지 요소의 시작을 $('.images')으로 하지 마시고 $(this) 으로 변경하세요.
그렇게 해서 안되면 'none' 하시고 그래도 안되면 'none !important' 하세요.
그래도 안되면 방법을 바꾸세요.
