Jquery[제이쿼리] toggleClass() 메서드 배우기

안녕하세요~ 제이쿼리공장장 주니주니 입니다.

오늘은 제이쿼리[jquery] toggleClass() 메서드를 배워보겠습니다.

어제 소스에서 조금 수정하여 준비해보았습니다.

실행 화면입니다.

=============================== 
$('.b1').on("click",function(){
   $('li').toggleClass("li_class");
  });
=============================== 
class b1가 click되면 <== toggleClass(className) 버튼입니다.
<li>태그에 toggleClass()메서드를 이용하여 class li_class가 있으면 삭제하고 없으면 추가하도록
하는 소스입니다.

아직 버튼을 누르기전입니다.

toggleClass(className)버튼을 누른뒤의 모습입니다.
<li>태그에 class li_class가 있던부분은 class li_class가 삭제되고 없던 부분은 추가된모습입니다.

=============================== 
$('.b2').on("click",function(){
   $('li').toggleClass("li_class",true);
  });
=============================== 
class b2가 click되면 <== toggleClass(className,state[true])버튼입니다.
<li>태그에 toggleClass()메서드를 이용하여 class li_class를 추가하는소스입니다.

toggleClass(className,state[true])버튼을 누른뒤의 모습입니다.
<li>태그에 class li_class가 추가된모습입니다.
addClass()와 같은 기능을 한다고 생각하시면된답니다.

=============================== 
$('.b3').on("click",function(){
   $('li').toggleClass("li_class",false);
  });
=============================== 
class b3가 click되면 <== toggleClass(className,state[false])버튼입니다.
<li>태그에 toggleClass()메서드를 이용하여 class li_class를 삭제하는 소스입니다.

※toggleClass()란 toggleClass()메서드를 실행했을시  사용자가 지정한
class가있으면 삭제를 없으면 추가를 하는 메서드입니다.

형식은 toggleClass(className) / toggleClass(className,state) /
           toggleClass([state ]) / toggleClass(function[,state ]) 으로 구성되어있습니다.

className에는 클래스 이름을 적어주시면된답니다.
state에는 Boolean타입으로 구성되어있습니다. 참/거짓 (true/false)을 적어 주시면된답니다.
function에는 기능을 적어주시면된답니다.

이해가안되시는분들은!! 
http://api.jquery.com/toggleClass/#toggleClass-state

여기로 가셔서 참고를 하시면된답니다.

toggleClass(className,state[false])버튼을 누른뒤의 모습입니다.
<li>태그에 class li_class가 삭제된모습입니다.
removeClass()와 같은 기능을 한다고 생각하시면된답니다.

오늘은 제이쿼리[jquery] toggleClass() 메서드를 배워보았습니다.

그럼 다음에 또만나요~