[jQuery] 클래스가 없으면 추가, 있으면 삭제하기

SHARE

팁이라고 정리하기도 부끄러운 내용이긴 하나
한번 써 놓으면 복사해서 사용하기 좋기도 하니 블로그에 써 놓습니다.
저 같이 디자이너이면서 살짝의 코드도 만져야 하는 분 에게라면 도움이 될거라 믿으며^^!
주로 스타일을 변경하고자 할 때, 지정한 클래스를 넣었다 뺐다 하고 싶을 때 사용합니다.

클래스 추가하기 addClass(class)

이제 원하는 요소에 clicked이라는 요소가 추가 되었습니다.

클래스 삭제하기 removeClass(class)

이제 원하는 요소에 clicked이라는 요소가 삭제 되었습니다.

클래스가 없으면 추가, 있으면 삭제하기 toggleClass(class)

예를들어 어떤 요소를 클릭했을 때 clicked이라는 클래스명이 있으면 클래스명을 삭제,
클래스명이 없으면 clicked클래스를 추가 하기. 라는 처리를 하고자 했을 때 입니다.

addClass(class) 와 removeClass(class)를 아는 분이라면…

위와 같은 코드가 떠오를지 모릅니다만, 사실은

이것만으로 요소에 클래스명이 없으면 추가, 있으면 삭제. 가 가능합니다. 즉!

요걸루다가 땡!

스폰서 링크

댓글

  1. 일랜 댓글:

    일본은 웹퍼블리셔라는 직군이 없는것으로 아는데,
    그럼 이런 스크립트는 디자이너가 하나요 개발자가 하나요??
    요즘은 프론트엔드 개발자 직군이 생겨서 프론트엔드 개발자가 있으면 이 사람이 하겠지만
    없는 회사의 경우가 궁금하네요

    • nanati 댓글:

      웹퍼블리셔라는 말이 없을뿐이지 비슷한 일을 하는 사람은 많습니다~
      제가 그렇구요 ㅎ
      간단한 스크립트는 저같은 디자이너가 하기도 하고요~
      회사마다 다르긴 한데 디자이너가 완전히 디자인만 하는 경우는 드문 것 같아요 경험상~
      프론트엔드 분야도 어느정도 할 수 있어야 취업하기 쉽습니다 ㅠ_ ㅠ

      • 일랜 댓글:

        딱 이댓글 남기고 다음주 월요일에 갑작스레 쫒겨나듯이(?) 퇴사하게 되어서 URL을 몰라 댓글을 확인 못했는데 오늘 우연히 발견했네요.
        일본은 한국보다 IT트렌드에 더 민감한걸로 알고 있어서 완전 다른줄 알았는데 비슷한가보네요.

        예전엔 이런 간단한 제이쿼리 소스 짜는것도 어려워하던게 엊그제 같은데 이제 아예 프론트엔드 개발자를 알아볼정도로 순수 자바스크립트 실력이 늘어난것 보면 약간 뿌듯하면서도 세월이 그만큼 흘렀다는 것이 슬프기도 하네요 ㅠㅠ

        자바스크립트가 재밋어서 이번엔 아예 프론트엔드 개발자로 알아보는 중인데 국내도 스타트업에서는 프론트엔드 개발자 구하는곳이 많더라구요.
        이쪽으로 취업해서 경력 쌓아놔야 해외취업할때 유리할꺼 같아서 스타트업 면접 보고 다니는 중이에요.
        나중에 해외취업 하고나서 이 댓글 보게된다면 또 옛생각 나겠죠? ㅎㅎㅎ

        • nanati 댓글:

          일랜님 같은 분들을 위해 제가 댓글을 꼭 달죠 ㅎㅎ
          우연히 다시 오셨을때 발견하면 앗! 하실 수 있게^^
          일본이 한국보다 IT트렌드에 더 민감한가요?
          워낙에 새로운 언어들이 많이 나오니까 열심히 따라가려고 저도 노력중입니다 ㅎ
          언젠간(?!) 프론트엔드엔지니어가 되고 싶다고 생각하고 있습니다~

          꼭 이루고 싶으신 것 이루시고 댓글 보시고 역시 하길 잘했어! 라고 생각하시는
          날이 하루 빨리 오기를 바랍니다! 화이팅~

  2. 안현지 댓글:

    퍼가요~!