[jquery] 버튼 클릭 시 class="on" 다시 클릭하면 class="off"하기 toggleClass 이용하여 한 줄로 끝내기

box 클래스 자식 요소의 li class가 btt인 클릭 시에 

버튼 클릭 시에 버튼 색깔 칠해주기

class가 "on"일 경우에 색이 칠해진다고 가정하고

클릭하면 class="on" 다시 클릭하면 class="off"가 됩니다.

 

보통은 아래와 같이 off를 지우고 on을 넣을텐데요.

//off 상태에서 클릭 시

$('.box li[class^="btt"]').removeClass("off").addClass("on")

//on 상태에서 클릭 시

$('.box li[class^="btt"]').removeClass("on").addClass("off")

 

간단하게 위에 코드를 한 줄로 만들어줍시다.

  $(document).on('click', '.box li[class^="btt"]', function(){
    
   $(this).toggleClass("on off");

});