이벤트 버블링 응용과 dataset 으로 탭기능 만들기

저번에 사용한 html, css를 계속해서 이용해보자

<div class="container mt-5">
        <ul class="list">
            <li class="tab-button">Products</li>
            <li class="tab-button active">Information</li>
            <li class="tab-button">Shipping</li>
        </ul>
        <div class="tab-content">
            <p>상품설명입니다. Product</p>
        </div>
        <div class="tab-content show">
            <p>상품정보입니다. Info</p>
        </div>
        <div class="tab-content">
            <p>배송정보입니다. Shipping</p>
        </div>
</div>

여기서 이벤트 버블링을 써보면 ul태그에 이벤트리스너 하나만 달면 버블링현상 때문에 어떤 버튼을 누르던 버튼1->list 버튼2->list 이런 식으로 클릭이 된다. 코드를 짜보면

$('.list').on('click', function(e) {
	if ( e.target == document.querySelectorAll('.tab-button')[0] ){
    탭열기(0)
  	};
    if ( e.target == document.querySelectorAll('.tab-button')[1] ){
    탭열기(1)
  	};
    if ( e.target == document.querySelectorAll('.tab-button')[2] ){
    탭열기(2)
  	};
});

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

이런 식으로, 내가 실제 누른 버튼이 0번이면 0번 열고, 1번이면 1번 열고 이렇게 짤 수 있다.

 

이제, 저 코드를 더 줄이려면 HTML에 미리 정보를 심는 data를 사용할 수 있다.

<div class="container mt-5">
        <ul class="list">
            <li class="tab-button" data-id="0">Products</li>
            <li class="tab-button active" 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>상품정보입니다. Info</p>
        </div>
        <div class="tab-content">
            <p>배송정보입니다. Shipping</p>
        </div>
</div>

위 처럼 HTML에 개발자만 볼 수 있는 data-작명="값" 이런 형태로 정보를 심을 수 있다. 그런 다음, 꺼내서 사용할 땐 

셀렉터.dataset.id 이렇게 사용할 수 있다. 그러면,

$('.list').on('click', function(e) {
	//탭열기(내가 누른 버튼에 숨겨진 숫자)
    탭열기(e.target.dataset.id)
});

이런 식으로. 내가누른(e.target) 버튼의 숫자(dataset.id) 를 이렇게 빼와서 쉽게 개발할 수 있다.

 

제이쿼리 식은

$('.list').data('작명','값'); 으로 값을 주고

$('.list').data('작명'); 으로 꺼내 쓸 수 있다.