jQuery에서 toggleClass 메서드를 사용한 클래스의 엄격한 제거 및 추가

toggleClass에 true 또는 false와 같은 상태 매개변수를 전달할 수도 있습니다. 그러면 클래스는 추가만 되거나 제거만 됩니다.

다음과 같은 CSS 클래스가 있다고 가정해 보겠습니다:

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

zzz 클래스가 단락에 적용됩니다:

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

클릭할 때 red 클래스만 추가해 보겠습니다:

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

보시다시피, 다시 클릭해도 아무런 변화가 일어나지 않습니다.

클래스를 작업하기 위한 위의 세 가지 메서드 - addClass, removeClass, toggleClass는 여러 클래스를 매개변수로 받을 수 있으며, 세트의 각 요소에 함수를 적용할 수도 있습니다.