[jQuery] toggleClass()로 클래스 on off 전환하기

예를들어 어떤 버튼이 있다.

그 버튼의 id를 switch라고 하고 처음에 클래스 off가 주어져있다.

이 버튼을 클릭하면 off를 on으로 바꾸고 싶다.

이런걸 할 때 다음과 같이 하면 된다.

$("#switch").removeClass("off").addClass("on")

그리고 다시 클릭할 때 다시 off로 바꾸려면 다음과 같이 해야한다.

$("#switch").removeClass("on").addClass("off")

 

전체 코드는 다음과 같아야 한다.

현재 클래스가 on인지 off인지도 검사해줘야 한다.

$("#switch").click(function(){
    if($(this).hasClass("on")) {
        $(this).addClass("off").removeClass("on");
    } else {
        $(this).addClass("on").removeClass("off");
    }
});

 

하지만 토글클래스를 이용하면 if 조건문이 필요없고 매우 간단해진다.

toggleClass 안에 클래스를 띄어쓰기로 써주면 multiple class스러워지는 효과가 있다.

 

전체 코드는 다음과 같다.

 

$("#switch").click(function(){
    $(this).toggleClass("on off");
});