过滤按钮活动状态

问题描述

我有一个同位素库，默认情况下所有项目都是可见的。 我想将默认状态设置为 NEW，以便在页面加载时只有 NEW 项目可见。

制作了一个 JSFiddle： https://jsfiddle.net/fourroses666/Lk034217/16/

脚本：

// product grid 
var $grid = $('.p-grid').isotope({
  itemSelector: '.grid-item',// percentPosition: true,masonry: {
    columnWidth: '.grid-item'
  }
});
var $gallery = $(".p-grid").isotope();
// filter items on button click
$('.filter-btns').on( 'click','button',function() {
  var filterValue = $(this).attr('data-filter');
  $grid.isotope({ filter: filterValue });
});
$('.filter-btns').on( 'click',function() {
  $(this).addClass('active').siblings().removeClass('active');
});
// masonary
$(window).on('load',function() {
  galleryMasonaryTwo();
})
function galleryMasonaryTwo(){
  var $grid = $(".p-grid");
  var filterFns = {};
  $grid.isotope({
    itemSelector: '.grid-item',masonry: {
      columnWidth: 0,}
  });
  $('ul.filter').on('click','li',function () {
    var filterValue = $(this).attr('data-filter');
    filterValue = filterFns[filterValue] || filterValue;
    $grid.isotope({
      filter: filterValue
    });
  });
  $('ul.filter').each(function (i,buttonGroup) {
    var $buttonGroup = $(buttonGroup);
    $buttonGroup.on('click',function () {
      $buttonGroup.find('.active').removeClass('active');
      $(this).addClass('active');
    });
  });
}   

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）