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

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

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

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

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

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

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

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

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

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

위의 예시 코드를 수정하세요 - 먼저 속성에 red 클래스를 추가로 작성한 다음 red 클래스가 제거만 되도록 만드세요.