jQuery 同位素过滤：当网格中的数据类别中没有项目时添加 class

Question

我有一个同位素布局，通过过滤器对网格项目进行排序；当项目按按钮排序时，网格中不在所选数据类别中的项目的 CSS 不透明度更改为 .25。

问题在于，当网格完成时 - 无论是在初始页面加载时还是在 "arrangeComplete" 通过排序按钮操作之后 - 某些数据类别在网格中没有任何项目。这意味着一些排序按钮仍然可以点击，即使它们没有排序，因为它们在网格中没有项目。

我想向这些按钮添加一个 class，并且还向这些按钮添加 "declick" 以便它们不是活动链接。

即：按钮 All、Red、Green、Blue、White 都有项目和排序；按钮橙色和灰色没有项目，所以我想向它们添加 class 和 "declick"。

我怎么能

1) count the items in the grid,

2) find if there are zero items, and if so

3) add a class to the button(s) so that the buttons have an opacity of .25, and

4) the button(s) are also declicked so they are not an active link?

在哪里以及如何添加到这个函数来做到这一点？

var selectedCategory;

var $grid = $('.isotope-list').isotope({
  itemSelector: '.grid-item',
  masonry: {
    columnWidth: 160,
    gutter: 20
  },
  getSortData: {
    selectedCategory: function( itemElem ) {
      return $( itemElem ).hasClass( selectedCategory ) ? 0 : 1;
    }
  }
});


var $items = $('.row').find('.grid-item');

$('.sort-button-group').on( 'click', '.button', function() {
  // set selectedCategory
  selectedCategory = $( this ).attr('data-category');
  if ( selectedCategory == 'all' ) {
    $grid.isotope({
      sortBy: 'original-order'
    });

    // restore all items to full opacity
    $items.css({
      opacity: 1
    });
    return;
  }


  // change opacity for selected/unselected items
  var selectedClass = '.' + selectedCategory;
  $items.filter( selectedClass ).css({
    opacity: 1
  });
  $items.not( selectedClass ).css({
    opacity: 0.25
  });

  // update sort data now that selectedCategory has changed
  $grid.isotope('updateSortData');
  $grid.isotope({ sortBy: 'selectedCategory' });
});

  // change is-checked class on buttons
$('.button-group').each( function( i, buttonGroup ) {
  var $buttonGroup = $( buttonGroup );
  $buttonGroup.on( 'click', 'button', function() {
    $buttonGroup.find('.is-checked').removeClass('is-checked');
    $( this ).addClass('is-checked');
  });
});

HTML 用于按钮；我需要向这些按钮添加 class：

<div class="button-container">
<div class="button-group sort-button-group">
<button class="button is-checked" data-category="all">all</button>
<button class="button" data-category="red">red</button>
<button class="button" data-category="green">green</button>
<button class="button" data-category="blue">blue</button>
<button class="button" data-category="white">white</button>
<button class="button" data-category="orange">orange</button>
<button class="button" data-category="gray">gray</button>
</div></div>

Answer 1

可以通过在同位素的设置选项中将 arrangeComplete event. It trigger this on page load, you will need to set initLayout 上的回调绑定到 false 和运行以下内容以手动触发初始布局来实现：

var $grid = $('.grid').isotope({
  ...
  // disable initial layout
  initLayout: false,
  ...
});

// ********** Event binding **********
// use $grid.one('arrangeComplete', ...) if it is only needed at initial page load
$grid.on('arrangeComplete', disableEmptySortButtons);

// manually trigger initial layout
$grid.isotope();

要获取每个类别项目的计数，您可以遍历排序按钮的类别，找到与该类别相关的 grid-items 的编号，如果它恰好是 0，请执行以下操作对于那个排序按钮：

a) 添加一个 class disable for opacity: 0.25 for the button appearance

b) 设置 disabled 属性以禁用按钮的点击功能

函数如下所示：

var disableEmptySortButtons = function() {
  $('.button-group button').each(function(i, btn) {
    var $btn = $(btn),
        thisCategory = $btn.attr('data-category');
    if (thisCategory !== 'all' && $('.isotope-container').find('.' + thisCategory).length === 0) {
      $btn.addClass('disabled').attr('disabled', 'disabled');
    }
  });
};

这里是更新后的 code pen 完整示例。

jQuery 同位素过滤：当网格中的数据类别中没有项目时添加 class

jQuery Isotope filtering: add a class when there are no items in a data-category in the grid

jquery

jquery-isotope