제이쿼리 현재 클래스는 제외한 나머지 클래스는 지우기
본문
<script type="text/javascript">
$(".thumbnail > .thumb > a").click(function() {
$(this).addClass('thumb_on');
$(this).not(this).removeClass('thumb_on');
});
</script>
클릭을 하면 클릭한 태그는 클래스가 남아있고
나머지 클래스는 사라지는 쿼리 만드려고 하는데
저렇게 해봤는데 쿼리가 생성만 되고 사라지지는 않는 이유가 뭘까요ㅜㅜ
사진은 1번 2번 3번까지 클릭했을때입니다.
제 의도대로라면 1번 클릭할때 클래스가 생성되고
2번 클릭하면 1번 클래스는 사라지고 2번에 클래스가 생성되어야 하는데
보시다시피 계속해서 클래스는 생성만 되고 지워지지 않네요.
틀린부분 알려주시면 감사하겠습니다.
답변 2
$(".thumbnail > .thumb > a").click(function() {
$(".thumb > a").removeClass('thumb_on');
$(this).addClass('thumb_on');
//$(this).not(this).removeClass('thumb_on');
});
순서만 바꾸면 될 것 같네요.
!-->
음.. 이렇게 수정해보시는건 어떤가요?
<script type="text/javascript">
$(".thumbnail > .thumb > a").click(function() {
$(this).addClass('thumb_on');
$(this).not(this).removeClass('thumb_on');
});
</script>
위의 내용을 아래처럼
<script type="text/javascript">
$(".thumbnail > .thumb > a").click(function() {
$(".thumbnail > .thumb > a").removeClass('thumb_on');
$(this).addClass('thumb_on');
});
</script>
위의 코드로 변경해보시면 아마 적용될것 같아요.
thumb a 를 클릭하면 전체의 thumb_on 을 삭제하고 클릭한(this)만 addClass 하는 형태입니다. ^^
!-->!-->
답변을 작성하시기 전에 로그인 해주세요.