JS - e.target.dataset 접근 + 제이쿼리

const button = $('.tab-button');
const content = $('.tab-content');

$('.list').click(function(e){
    tabOpen(Number(e.target.dataset.id));
});

function tabOpen(i){
    button.removeClass('orange');
    button.eq(i).addClass('orange');
    content.removeClass('show');
    content.eq(i).addClass('show');
}

 

tab버튼 구현하다가 맞닥뜨린 문제.

 

li에 data-id ="0" 데이터 값을 부여해서 그에 맞는 컨텐츠를 보여주는 코드인데..

제이쿼리랑 같이 쓰다보니 data값을 못가져오는 오류가 났다.

tabOpen(e.target.dataset.id) 이렇게 쓰면 문자열로 값이 넘어와서 함수실행이 안댐.

그래서 Number()로 감싸서 변환해줬다.

제이쿼리 형식으로 쓰려면 tabOpen($(e.target).data('id')); 했어야함 ㅇㅅㅇ