[jQuery] 클릭 시 클래스 추가/제거

#jQuery #addClass #removeClass #hasClass #ifelse

 

안녕하세요. Gi_1입니다.

실무에서 많이 쓰는, 클릭 시 클래스 추가/제거 방법입니다.

 

저번 포스팅에서는 자바스크립트로 클릭 시 클래스 추가/제거를 포스팅 하였는데..

https://gi-1.tistory.com/16

[자바스크립트] 클릭시 클래스 추가/제거

사실, 간단히 기능만 구현 하자면 제이쿼리가 훨씬 코드가 짧고 간단합니다.

 

그럼에도 자바스크립트를 공부하는 자세는 필요하다 생각 됩니다.

 

코드입니다.

 

HTML

 

    <h1>

        HasClass, addClass, removeClass, if, else

    </h1>

 

CSS

 

    h1{

        font-size: 14px;

        font-weight: 400;

        color: #000;

        padding: 15px;

        background: beige;

        transition: all 0.4s ease-in-out;

    }

    h1.active{

        color: tomato;

        font-weight: bold;

        font-size: 16px;

        background: burlywood;

    }

 

 

 

Script 1. hasclass를 통한 if else를 이용한 방법

 

    <script>

        $("h1").click(function(){

            if($("h1").hasClass("active")){

                $("h1").removeClass("active");

            } else{

                $("h1").addClass("active");

            }

        });

    </script>

 

 

 

 

Script 2. toggleClass를 이용한 방법.

    <script>

        $("h1").click(function(){

           $("h1").toggleClass("active");

        })

    </script>

 

 

1,2중 편하신걸 선택하시면 됩니다. 물론 toggleClass 겠지요.

하지만 toggle을 사용하지 않고 if else를 사용할 때도 있으니 참고!!!

 

 

 

---

 

 

 

클릭 전

 

클릭 후

 

 

===추가내용===

 

hasClass, addClass, removeClass 에서는 .이나 #이 필요가 없습니다. 왜냐하면, 이미 Class함수이기 때문에 클래스명만 작성하면 됩니다.

 

다만, $("") 부분에서는, 자바스크립트의 쿼리셀렉터와 동일하게css처럼 선택하면 됩니다.

 

<h1></h1> = $("h1")<h1 class='yes'></h1> = $(".yes")