我的位置：首页 › 一站式数据分析平台-亿信ABI › 亿信ABI-心得体验 › 常用内容筛选方法

常用内容筛选方法

复制链接 | 收藏本帖

2675

: 前端小姐姐小试身手Lv3

发表于2021-6-29 19:33

楼主

引言：在写大屏页面时，我们常需要用到内容筛选，点击不同按钮显示不同内容，例如这样：

下边就简单介绍下我在写内容筛选的处理方法：

给筛选导航添加data-filter属性，设置不同的值，然后对内容部分添加data-category属性，设置对应的值，然后主要借助jq，实现点击不同筛选导航，底下显示不同的内容，具体代码如下：

//筛选
$('.sifting-nav li[data-filter]').each(function(){
$(this).on('click', function() {
      var data= $(this).attr('data-filter'),
         show = $('.sifting-sub').find( $('.filtr-item[data-category='+data+']') );
      $(this).addClass('active').siblings().removeClass('active');
      if( data == 'all' ){
         $('.sifting-sub .filtr-item').show();
      }else{
         $('.sifting-sub .filtr-item').hide();
         show.show();
      }
});
});
显示全部时，就判断当属性值为‘all’时，给所有内容设置为show()就可以了