jQuery CSS 적용/미적용 (addClass / removeClass)

CSS는 기본적으로

.arrowTest {background-color: coral; color: white;}

요런 형태로 되어있다.

앞에 아이디나 클래스로 선택자를 지정해서 스타일을 적용하는 것이다.

그럼 클릭하면 다른 CSS가 적용되게 하려면 어떻게 해야할까??

미리 클래스를 만들어두면 된다.

즉, 실제로 arrowTest 클래스는 없지만 선택자로 .arrowTest 라는 클래스를 지정해 놓는 것이다.

그러면 나중에 클래스를 만들면 거기에 원하는 스타일이 적용되면서 해피엔딩으로 마무리된다!

예를 보면 더 이해가 팡팡 되니깐 예제를 먼저 보면

.tbArrowUp{background-image:../home/image/arrowup.png}
.tbArrowDown{background-image:../home/image/arrowdown.png}

CSS

$(document).ready(function(){
  
      $('th > a').click(function(){
           if($('th > a').not($(this)).hasClass('tbArrowDown') || $('th > a').not($(this)).hasClass('tbArrowUp')){
              $('th > a').not($(this)).removeClass();
              lineUp.chkUpDown = 0;
           }
           if(lineUp.chkUpDown == 0){
              $(this).removeClass('tbArrowDown').addClass('tbArrowUp');
              lineUp.chkUpDown = 1;
           } else {
              $(this).removeClass('tbArrowUp').addClass('tbArrowDown');
              lineUp.chkUpDown = 0;
           }

        });
 
  });

SCRIPT

tbArrowUp / tbArrowDown 이라는 클래스는 없지만 해당 클래스에 이미지를 적용하겠다!

라고 CSS에 지정해둔다.

그리고 한번 클릭하면 클릭한 부분에 해당 클래스를 만든다. ( $(this).addClass('tbArrowUp) )

스타일 적용을 해제하고 싶으면 클래스를 삭제해 주면 그만이다. ( $(this).removeClass('tbArrowDown) )

믿고 따라해보는 w3schools에 가면 더 이해가 잘 되는건 안 비밀

jQuery API Docs도 보면서 이해하면 더 쉬운 CSS 적용하기 안하기!

(그냥 ctrl + f로 검색해서 찾으면 되니까 jQuery docs가 개인적으로 제일 보기 편한 느낌)