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

Question

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

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

我想为这些按钮添加一个类，并“取消单击”按钮，使它们不是活动链接。

Codepen：http://codepen.io/anon/pen/WooJom

即：按钮 All、Red、Green、Blue、White 都有项目和排序；橙色和灰色按钮没有项目，所以我想为它们添加一个类并“取消单击”它们。

我该怎么做

1) 计算网格中的项目，

2) 查找是否有零个项目，如果是的话

3) 为按钮添加一个类，使按钮的不透明度为 .25，和

4) 按钮也被取消点击，因此它们不是活动链接？

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

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；我需要为这些按钮添加一个类：

<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事件上绑定一个回调来实现。它在页面load 上触发，您需要在同位素的设置选项中将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) 为按钮外观添加 disable 类 opacity: 0.25

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 以获取完整的工作示例。