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

问题

I have an isotope layout with sorting of grid items by a filter; and when items are sorted by button, the items in the grid that are not in the selected data-category have their CSS opacity changed to .25.

The problem is that when the grid is complete - either on initial page load or after an "arrangeComplete" by the button action of sorting - there are certain data-categories that have no items in the grid. This means that some sorting buttons are still clickable even though they don't sort because they have no items in the grid.

I want to add a class to these buttons, and also "declick" the button(s) so that they are not active links.

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

I.e.: the buttons All, Red, Green, Blue, White all have items and sort; buttons Orange and Gray have no items, so I want to add a class to them and "declick" them.

How can I

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?

Where and how do I add to this function to do that?

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 for the buttons; I need to add a class to these buttons:

<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>

回答1:

It can be achived by the binding a callback on arrangeComplete event. It trigger this on page load, you will need to set initLayout to false in the isotope's setup options and run the following to manually trigger initial layout:

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();

To get count of each category item, you can iterate over the sort button's categories, find the no of grid-items related to that category and if it happens to be 0, perform the following for that sort button:

a) add a class disable for opacity: 0.25 for the button appearance

b) set the disabled attribute to disable button's click functionality

Here's that function will look like:

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');
    }
  });
};

Here's an updated code pen for a complete working example.

来源：https://stackoverflow.com/questions/40666226/jquery-isotope-filtering-add-a-class-when-there-are-no-items-in-a-data-category

标签

jquery

jquery-isotope