[Jquery] addClass, removeClass, hasClass, toggleClass

addClass

클래스를 추가한다.

      function myFunc() {
        $("#my-div").addClass("my-red")
      }

 

removeClass

클래스를 제거한다.

      function myFunc() {
        $("#my-div").removeClass("my-red")
      }

 

hasClass

클래스 값이 있는지 검사한다.

      function myFunc() {
        $("#my-div").hasClass("my-red")
      }

 

toggleClass

addClass, removeClass, hasClass를 합쳐서 토글 기능을 쉽게 사용할 수 있도록 해준다.

toggleClass를 사용하지 않고 토글기능을 구현하려면 다음과 같다.

      function myFunc() {
        var result = $("#my-div").hasClass("my-red")
        if(result==true){
            $("#my-div").removeClass("my-red")
        }else if(result==false){
            $("#my-div").addClass("my-red")
        }
      }

위와 같은 여러 줄의 코드를 아래의 toggleClass를 사용하면 한줄로 줄여서 쓸 수 있다.

      function myFunc() {
        $("#my-div").toggleClass("my-red")
      }