22. tab (2)

fe.syhan·2023년 10월 31일

JS 기초

목록 보기
19/52
post-thumbnail

반복되는 셀렉터


$('.tab-button').eq(0).on('click', function(){
  $('.tab-button').removeClass('orange');
  $('.tab-button').eq(0).addClass('orange');
  $('.tab-content').removeClass('show');
  $('.tab-content').eq(0).addClass('show');
})

이전 챕터의 기능 구현 중,

$('.tab-button')$('.tab-button') 같이 비슷한 셀렉터가 매우 많이 등장한다.

셀렉터문법은 기본적으로 작동시간이 오래걸린다.

셀렉터를 하나 쓸 때 마다 html을 읽고 찾아야 해서 올래 걸리는 것인데 html이 길고 복잡할 수록 오래 걸린다.

그래서 반복적으로 등장하면 변수에 할당해 쓰자.

0개의 댓글