jQuery에서 toggleClass 메서드 사용하기

또한 유용한 메서드인 toggleClass가 있습니다. 이 메서드는 지정된 클래스가 없으면 추가하고, 있으면 제거합니다. 한 버튼을 클릭할 때마다 페이지 요소에 주기적인 변화를 주고 싶을 때 필요할 수 있습니다.

예제를 통해 이 메서드를 살펴보겠습니다. 다음과 같은 CSS 스타일이 있다고 가정합니다:

css.red {
  color: red;
}
  
.zzz {
  font-style: italic;
}

또한 클래스 zzz를 가진 단락이 있습니다:

html<p class="zzz" id="test">text</p>
<button>click</button>

예를 들어, 버튼을 처음 클릭할 때 요소에 빨간색을 추가하는 클래스 red를 추가하고, 다시 클릭할 때는 이 클래스를 제거하여 빨간색이 사라지도록 만들어 봅시다. 버튼을 다시 클릭하면 모든 것이 다시 반복됩니다.

다음 코드를 실행하여 확인해 보세요 (클래스 zzz는 이탤릭체로 표시하여, toggleClass가 다른 클래스의 작동을 방해하지 않음을 보여줍니다):

javascript$('button').click(function() {
  $('#test').toggleClass('red');
});

첫 번째 클릭 후 HTML 코드는 다음과 같이 나타납니다 (클래스 red가 추가됨):

html<p class="zzz red" id="test">text</p>
<button>click</button>

두 번째 클릭 후에는 다음과 같이 나타납니다 (클래스 red가 사라짐):

html<p class="zzz" id="test">text</p>
<button>click</button>