Изотоп метафиззы - деактивировать фильтр, если нет результата комбинации

Question

Я использую изотоп метафиззы для фильтрации предметов.

У меня есть 2 ряда фильтров: категория 1 (кабель, инструменты, материал1, материал2) и категория 2(кабель1, кабель2, инструмент1, инструмент2).

Можно ли деактивировать фильтр (с помощью CSS, например, серый), если при объединении двух категорий не будет результата?

Пример: я нажимаю на фильтр 'stuff2', и в категории 2 нет ни одного элемента, который соответствует, поэтому jQuery добавляет класс к категории 2, как выделение серым цветом.

Мой изотопный код:

jQuery.noConflict();
(function($){
    var $container = $('#container'),
    filters = {};

$container.isotope({
  itemSelector : '.element',
      {mfilterscript}
      {mfilterscript2}
});

// filter buttons
$('.filter a').click(function(){
  var $this = $(this);
  // don't proceed if already selected
  if ( $this.hasClass('selected') ) {
    return;
  }

  var $optionSet = $this.parents('.option-set');
  // change selected class
  $optionSet.find('.selected').removeClass('selected');
  $this.addClass('selected');

  // store filter value in object
  // i.e. filters.color = 'red'
  var group = $optionSet.attr('data-filter-group');
  filters[ group ] = $this.attr('data-filter-value');
  // convert object into array
  var isoFilters = [];
  for ( var prop in filters ) {
    isoFilters.push( filters[ prop ] )
  }
  var selector = isoFilters.join('');
  $container.isotope({ filter: selector });

  return false;
});

})(jQuery);

Answer 1

Это абсолютно возможно.

Вам нужно сделать пару вещей

1) проверьте длину массива фильтров для всех возможных будущих комбинаций фильтров

Например, скажем, у вас есть список фруктов, каждый из которых имеет класс "фрукты" и класс для фруктов типа "яблоко", "груша", "апельсин" и т. Д.

Вы бы сделали что-то вроде этого:

    $('a.fruit').each(function() {
            var $this = $(this);
            var getVal = $this.attr('data-filter-value');
            var numItems = $('img'+getVal+':not(.isotope-hidden)').length; // <-- This example is for filtering img tags but just replace it with whatever element you're actually filtering
            if(!$(this).hasClass('active') && !$that.hasClass('fruit') ){ // <-- i.e. it's a fruit that has not already disabled by previous filter combinations
                if(numItems === 0){
                    $this.addClass('disabled');
                }
                else {
                    $this.removeClass('disabled');
                }
            }
            else if( $this.hasClass('active') && $this.hasClass('disabled') ){
                $this.removeClass('disabled');
            }
            else if(!$(this).hasClass('active') ) {
                if(numItems > 0){
                    $this.removeClass('disabled');
                }
            }
        });

2) Вам нужно будет добавить код для обработки ваших отключенных фильтров, чтобы они не могли быть запущены. Лучшее место для этого - в начале вашей процедуры фильтрации. Т.е., прежде чем любая фильтрация будет обработана, вы хотите выйти из подпрограммы.

Есть много способов сделать это (e.preventDefaults например, но в этом случае, возможно, безопаснее просто return false поэтому нам не нужно беспокоиться о повторном связывании поведения по умолчанию впоследствии).

Например, вы можете сделать что-то вроде этого:

    $('.filter a').click(function(){
        // exit directly if filter already disabled
        if ($(this).hasClass('disabled') ){
            return false;
        } else if ($(this).hasClass('selected') ) {
            return false;
        }

        ... 

    }); // close routine

Вот живой пример всего, что работает

И вот весь JavaScript для этого примера.

Надеюсь, это поможет!