过滤按钮活动状态

Question

我有一个同位素库，默认情况下所有项目都是可见的。 我想将默认状态设置为 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', 'button', 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', 'li', function () {
      $buttonGroup.find('.active').removeClass('active');
      $(this).addClass('active');
    });
  });
}