제이쿼리 데이터값 가져오기 data (필터기능)

---

 

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

    }

  });