[jQuery] 클래스가 없으면 추가, 있으면 삭제하기

팁이라고 정리하기도 부끄러운 내용이긴 하나
한번 써 놓으면 복사해서 사용하기 좋기도 하니 블로그에 써 놓습니다.
저 같이 디자이너이면서 살짝의 코드도 만져야 하는 분 에게라면 도움이 될거라 믿으며^^!
주로 스타일을 변경하고자 할 때, 지정한 클래스를 넣었다 뺐다 하고 싶을 때 사용합니다.

클래스 추가하기 addClass(class)

$("요소").addClass("clicked");

이제 원하는 요소에 clicked이라는 요소가 추가 되었습니다.

클래스 삭제하기 removeClass(class)

$("요소").removeClass("clicked");

이제 원하는 요소에 clicked이라는 요소가 삭제 되었습니다.

클래스가 없으면 추가, 있으면 삭제하기 toggleClass(class)

예를들어 어떤 요소를 클릭했을 때 clicked이라는 클래스명이 있으면 클래스명을 삭제,
클래스명이 없으면 clicked클래스를 추가 하기. 라는 처리를 하고자 했을 때 입니다.

addClass(class) 와 removeClass(class)를 아는 분이라면…

$("요소").click(function(){
  if($(this).hasClass("clicked")){ // 클릭한 요소가 clicked이라는 클래스명을 가지고 있을 때
    $(this).removeClass("clicked");
  }else{
    $(this).addClass("clicked");
  }
});

위와 같은 코드가 떠오를지 모릅니다만, 사실은

$("요소").toggleClass("changed");

이것만으로 요소에 클래스명이 없으면 추가, 있으면 삭제. 가 가능합니다. 즉!

$("요소").click(function(){
  $(this).toggleClass("clicked");
});

요걸루다가 땡!