[JQuery] .toggleClass()를 이용해서 클래스 추가 및 삭제

 

 

원하는 화면은 다음과 같습니다. (기본적으로 최신순에 배경색이 부여된 상태입니다.)

 

하지만 출력되는 화면은 이렇게 나온다..,,ㅎ

 

 

로직은 클래스를 on으로 변경하면 배경색이 변경된다는 로직입니다.

 

 

CSS

.talk-filter-box-inner .on{
        background-color: rgb(220, 53, 69);
        color: white;
}

 

HTML

<div class="TalkPageHeaderModule header">
    <div class="talk-filter-box-wrapper"  style="width: 285px;" >
        <div><h2 class="content-header">전체 &nbsp;&nbsp;</h2></div>
        <div class="talk-filter-box-inner" id="selectOption">
            <div class="talk-filter-item on">최신순</div>
            <div class="talk-filter-item " >조회순</div>
            <div class="talk-filter-item">좋아요순</div>
        </div>
    </div>
</div>

 

JS

ㅅㅣ도1 -> 😩

아이디가 id="selectOption"의 자손 div 요소에 클릭이벤트 부여시 on이라는 클래스를 부여하는 방법

<script>
  $("#selectOption>div").click(function(){
  $(this).addClass('on');
  $(this).sbilings.removeClass('on');
  })
</script>

 

 

 

ㅅㅣ도2 -> 😒 

방법1과 마찬가지로 아이디가 selectOption의 자손인 div에 클릭 이벤트 발생시 on이라는 클래스를 추가하여 변경하고, 나머지 체크가 안된 요소들은 removeClass를 해서 배경색이 안보이게끔 하고 싶었어요. 

<script>	

    $(document).on("click","#selectOption>div",function(){
    $(this).addClass('on');
    $(this).siblings.removeClass('on');
    })

</script>

 

문제점

 $(this).siblings().removeClass('on');

siblings.removeClass('on')이 아니라 siblings().removeClass('on') 였다.

 

팀원분들께서 도와주셨는데, 덕분에 알게된 .toggleClass()를 적용해서 다시 바꿔보았다.

 

.toggleClass()는 addClass랑 removeClass가 같이 있는 느낌이라서, 한쪽이  on이면 다른 쪽은 값이 없어지는 방식이다.

이렇게 바꾸니까 다음과 같이 동적으로 on off가 보여져서 결과적으로 딱!내가 원하는 코드가 되었다.

 

 

코드는 다음과 같다 ! 

<script>
  $(document).on("click","#selectOption>div",function(){
  $(this).toggleClass('on');
  $(this).siblings().removeClass('on');
  })            
</script>

 

.toggleClass()

 

jQuery / Method / .toggleClass() - 선택한 요소에 클래스 값을 넣었다 뺐다 하는 메서드

 

 

---

 

배운점

✔ siblings() < 괄호 빼먹지 말기

✔ toggleClass() < 클래스를 동적으로 추가 및 삭제할 수 있는 메소드