jQuery/jQuery 기본
제이쿼리 데이터값 가져오기 data (필터기능)
hyojinny
2022. 11. 23. 15:22

HTML문서에 data-cate="56" 적은 data 값을 가져와라
// 서브탭 이벤트
$('.sub_tab a').on('click', function () {
var cate = $(this).data('cate');
// 데이터가져오기
console.log(cate);
변수에 담아 console 로 찍어보기

데이터값 속성선택자로 연결하기
// 서브탭 이벤트
$('.sub_tab a').on('click', function () {
var cate = $(this).data('cate');
// 데이터가져오기
// console.log(cate);
// 연결하기
$('.menu_list li').hide();
$('.menu_list li[data-cate=' + cate + ']').show();
});
});
[data-cate=' + cate + '] 속성, 연결연산자 사용
data-cate + 의 값을 가져오도록 + 보여줘라
이벤트 반복을 막고 if 조건문으로 전체 다 보여주며 active 켜주기
// 서브탭 이벤트
$('.sub_tab a').on('click', function (e) {
e.preventDefault();
$(this).addClass('active').siblings().removeClass('active');
var cate = $(this).data('cate');
// 연결하기
if (cate === 'all') {
$('.menu_list li').show();
} else {
$('.menu_list li').hide();
$('.menu_list li[data-cate=' + cate + ']').show();
}
});