[JS] 내장함수 toggle의 편리함.

zero_0·2022년 2월 9일
0

FE 학습

목록 보기
18/22
post-thumbnail

같은 팀원 분이 알려주신 내장함수 toggle! 이렇게 간편하게 한줄로 class를 붙일 수 있다니

///A01 하트 버튼 클릭시 하트 칠하기
const btnHeart = document.querySelector('.btn-heart');

function fillHeartRed() {
  console.log('btnHeart.className', btnHeart.className);

  btnHeart.classList.toggle('on');

btnHeart.addEventListener('click', fillHeartRed);

toggle을 몰랐다면 contains와 add, remove를 사용해서 여러줄이 되었을 터..


   // class안에 on이 있냐?
  if(btnHeart.classList.contains('on')){
    // YES::
    btnHeart.classList.remove('on');
  }else{
    // NO::
    btnHeart.classList.add('on');
  }

  // class가 btn btn-heart on과 다른가?
  if(btnHeart.className !== 'btn btn-heart on') {
    btnHeart.classList.add('on');
  }else{
    btnHeart.classList.remove('on');

하트버튼 이런 모습이다.

profile
차근차근 채워가는 it일지

0개의 댓글