![[jQuery] 클래스가 없으면 추가, 있으면 삭제하기](https://nanati.me/wp-content/uploads/2018/03/jqclass.jpg)
팁이라고 정리하기도 부끄러운 내용이긴 하나
한번 써 놓으면 복사해서 사용하기 좋기도 하니 블로그에 써 놓습니다.
저 같이 디자이너이면서 살짝의 코드도 만져야 하는 분 에게라면 도움이 될거라 믿으며^^!
주로 스타일을 변경하고자 할 때, 지정한 클래스를 넣었다 뺐다 하고 싶을 때 사용합니다.
한번 써 놓으면 복사해서 사용하기 좋기도 하니 블로그에 써 놓습니다.
저 같이 디자이너이면서 살짝의 코드도 만져야 하는 분 에게라면 도움이 될거라 믿으며^^!
주로 스타일을 변경하고자 할 때, 지정한 클래스를 넣었다 뺐다 하고 싶을 때 사용합니다.
클래스 추가하기 addClass(class)
$("요소").addClass("clicked");
이제 원하는 요소에 clicked이라는 요소가 추가 되었습니다.
클래스 삭제하기 removeClass(class)
$("요소").removeClass("clicked");
이제 원하는 요소에 clicked이라는 요소가 삭제 되었습니다.
클래스가 없으면 추가, 있으면 삭제하기 toggleClass(class)
예를들어 어떤 요소를 클릭했을 때 clicked이라는 클래스명이 있으면 클래스명을 삭제,
클래스명이 없으면 clicked클래스를 추가 하기. 라는 처리를 하고자 했을 때 입니다.
addClass(class) 와 removeClass(class)를 아는 분이라면…
$("요소").click(function(){
if($(this).hasClass("clicked")){ // 클릭한 요소가 clicked이라는 클래스명을 가지고 있을 때
$(this).removeClass("clicked");
}else{
$(this).addClass("clicked");
}
});
위와 같은 코드가 떠오를지 모릅니다만, 사실은
$("요소").toggleClass("changed");
이것만으로 요소에 클래스명이 없으면 추가, 있으면 삭제. 가 가능합니다. 즉!
$("요소").click(function(){
$(this).toggleClass("clicked");
});
요걸루다가 땡!
댓글
프론트엔드로 나아가기 위해서 열심히 공부중인 지나가던 신입 퍼블리셔입니다. 다른 함수 찾다가 우연히 여기 들어왓는데 일랜님과 나나티님의 댓글이 영화한편 보는것 같아서 나도 훗날 저렇게 되었으면 좋겠다 라는 생각이 드네요^^ 동기부여가 되었습니다. 감사합니다
라라님 반갑습니다^^
워낙에 업뎃이 느린 블로그인지라, 주인장인 저조차 자주 열어보질 못해서…
이런 댓글을 발견하면 참 기분이 좋습니다^^
라라님도 시간이 지나 우연히 다시 들어오시면 꼬옥 댓글 남겨주세요^^
좀 늦긴 하지만, 확인 하고 있습니다~
일본은 웹퍼블리셔라는 직군이 없는것으로 아는데,
그럼 이런 스크립트는 디자이너가 하나요 개발자가 하나요??
요즘은 프론트엔드 개발자 직군이 생겨서 프론트엔드 개발자가 있으면 이 사람이 하겠지만
없는 회사의 경우가 궁금하네요
웹퍼블리셔라는 말이 없을뿐이지 비슷한 일을 하는 사람은 많습니다~
제가 그렇구요 ㅎ
간단한 스크립트는 저같은 디자이너가 하기도 하고요~
회사마다 다르긴 한데 디자이너가 완전히 디자인만 하는 경우는 드문 것 같아요 경험상~
프론트엔드 분야도 어느정도 할 수 있어야 취업하기 쉽습니다 ㅠ_ ㅠ
딱 이댓글 남기고 다음주 월요일에 갑작스레 쫒겨나듯이(?) 퇴사하게 되어서 URL을 몰라 댓글을 확인 못했는데 오늘 우연히 발견했네요.
일본은 한국보다 IT트렌드에 더 민감한걸로 알고 있어서 완전 다른줄 알았는데 비슷한가보네요.
예전엔 이런 간단한 제이쿼리 소스 짜는것도 어려워하던게 엊그제 같은데 이제 아예 프론트엔드 개발자를 알아볼정도로 순수 자바스크립트 실력이 늘어난것 보면 약간 뿌듯하면서도 세월이 그만큼 흘렀다는 것이 슬프기도 하네요 ㅠㅠ
자바스크립트가 재밋어서 이번엔 아예 프론트엔드 개발자로 알아보는 중인데 국내도 스타트업에서는 프론트엔드 개발자 구하는곳이 많더라구요.
이쪽으로 취업해서 경력 쌓아놔야 해외취업할때 유리할꺼 같아서 스타트업 면접 보고 다니는 중이에요.
나중에 해외취업 하고나서 이 댓글 보게된다면 또 옛생각 나겠죠? ㅎㅎㅎ
일랜님 같은 분들을 위해 제가 댓글을 꼭 달죠 ㅎㅎ
우연히 다시 오셨을때 발견하면 앗! 하실 수 있게^^
일본이 한국보다 IT트렌드에 더 민감한가요?
워낙에 새로운 언어들이 많이 나오니까 열심히 따라가려고 저도 노력중입니다 ㅎ
언젠간(?!) 프론트엔드엔지니어가 되고 싶다고 생각하고 있습니다~
꼭 이루고 싶으신 것 이루시고 댓글 보시고 역시 하길 잘했어! 라고 생각하시는
날이 하루 빨리 오기를 바랍니다! 화이팅~
진짜 오랫만에 찾아와서 댓글 답니다.
저런 고민했던게 엊그제 같은데 지금은 유명한 기업에서 프론트 개발자로 일하고 있습니다.
작년부터 한국도 개발자 대우가 좋아져서 해외취업 생각이 쏙 들어갔네요 ㅎㅎ
코로나 때문에 나갔다간 돌아오지 못할 수도 있다는 것도 있구요. (격리때문에 휴가로 오긴 무리니깐요)
2021년도 다 끝나가는데 코로나 조심하시고 미리 새해복 많이 받으세요~!
음 댓글 제대로 작성했는데 왜 안뜨는건지;
이때만 해도 한국 개발자 대우가 개차반이라 해외 취업 생각했었는데, 지금은 유명한 기업에서 프론트엔드 개발자로 일하고 있습니다 ㅎㅎ
작년부터 개발자 처우가 좋아져서 걍 한국에서 개발자 생활 계속 하려구요.
(코로나 때문에 나갔다간 언제 올수 있을지 모른다는 것도 있구요.)
이번년도도 끝나가는데 코로나 조심하시고 새해에는 복 많이 받으세요
일랜님 새해 복 많이 받으세요^^
댓글은 승인제로 운영하고 있어서 ㅎ 제가 확인 하고 승인을 하면 보이게 된답니다~
우선 유명 기업에 프론트 개발자로 취업하신 것 축하드립니다!!
오랜만에 댓글 보니 반갑고 좋고 그러네요 ^^
지금 댓글을 보니 제가 프론트 개발자가 되고 싶다는 헛소리를 지껄였네요 ㅠ ㅠㅋㅋ
디자이너 열심히 하고 있습니다 ㅎ
자바스크립트 깨작거렸던 회사에서 디자인에 집중할 수 있는 회사에 이직을 해서 열심히 일하고 있습니다. 프론트 개발자가 따로 있어서 제가 할 필요가 없어졌네요~
간단한 마크업만 하고 있는 정도입니다 ㅎㅎ
한국에서 개발자의 처우가 좋아졌다고 하니 정말 잘 되었네요!!
(디자이너 처우는 여전하려나 ㅠㅠ)
항상 건강하시고, 올 한 해 하시는 일 다 잘 되시길 바랍니다!! ~~
생각 나실 때 또 방문해주세요~ ^^ (현생이 넘 바빠 업뎃이 잘 안되는 블로그이긴 하지만..ㅋㅋ)
퍼가요~!
어디에 어떤 형식으로 퍼가시는지 알려주세요.
내용 전체를 그대로 복사해서 가져가시는 것은 금지하고 있습니다.
네이버에 비공개 글로 출처포함해서 퍼가요~!
댓글 감사합니다 ^^
퍼가실때는 전문을 퍼가시면 안됩니다… (비공개일 경우 가능)