Question

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

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

我想为这些按钮添加一个类，并且还“忽略”按钮，使它们不是活动链接。

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

即：按钮全部，红色，绿色，蓝色，白色都有物品和分类;按钮橙色和灰色没有项目，所以我想为它们添加一个类并“忽略”它们。

我怎么能

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，用于完整的工作示例。

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

1 个答案: