24. dataset

함수로 축약 하기

반복문을 사용해서 탭 기능을 만드는 코드입니다.

<div class="container mt-5">
    <ul class="list">
      <li class="tab-button" data-id="0">Products</li>
      <li class="tab-button orange" data-id="1">Information</li>
      <li class="tab-button" data-id="2">Shipping</li>
    </ul>
    <div class="tab-content">
      <p>상품설명입니다. Product</p>
    </div>
    <div class="tab-content show">
      <p>스펙설명입니다. Information</p>
    </div>
    <div class="tab-content">
      <p>배송정보입니다. Shipping</p>
    </div>
  </div>

for (let i = 0; i < $('.tab-button').length; i++){

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

});

재사용이 용이하고 가독성을 높이기 위해 함수를 사용해 축약을 할 수가 있습니다.

for (let i = 0; i < $('.tab-button').length; i++){

  $('.tab-button').eq(i).on('click', function(e){
    탭열기(i)
  })

});

function 탭열기(i) {
	$('.tab-button').removeClass('orange');
	$('.tab-button').eq(i).addClass('orange');
	$('.tab-content').removeClass('show');
	$('.tab-content').eq(i).addClass('show');
}

이벤트리스너 줄이기

위 코드는 탭을 만들 때 3개의 버튼 각각에 이벤트리스너를 부착 했는데

버튼 3개의 부모인 <ul class=”list”> 에 이벤트리스너를 달아도 이벤트버블링 현상으로 탭기능이 가능하다.

$('.list').click(function(){
 // 지금 누른게 버튼 0이면 탭열기(0) 실행
 // 지금 누른게 버튼 1이면 탭열기(1) 실행
 // 지금 누른게 버튼 2이면 탭열기(2) 실행
})

이벤트리스너를 줄려야 하는 이유

• 이벤트리스너 하나당 렘사용량이 늘어 나게 된다.
• 버튼이 많을 수록 위와 같이 줄이는게 덜 복잡하다.

dataset

---

html 안에 임의의 데이터를 지정해 줄 수가 있습니다.

<div data-데이터이름="값"></div>

dataset.데이터이름 을 통해서 임의지정해준 데이터의 값을 얻을 수가 있다.

document.querySelector().dataset.데이터이름;

탭의 버튼 들에 임의의 데이터를 지정해 주자.

<li class="tab-button" data-id="0">Products</li> 
<li class="tab-button orange" data-id="1">Information</li> 
<li class="tab-button" data-id="2">Shipping</li>

굳이 if문을 쓸 필요도 없이 한 줄로 해결이 된다.

$('.list').click(function(e){
  탭열기(e.target.dataset.id);
});