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();
    }
  });