Комбинированные фильтры изотопных переключателей

0

Я бы хотел, чтобы комбинированные фильтры изотопов переключались, так что здесь

http://isotope.metafizzy.co/demos/combination-filters.html

при нажатии на "красный" я хотел бы иметь возможность переключать его. Таким образом, он покажет мне все красные цвета, когда вы нажмете на него один раз, и когда снова щелкнете, он снова покажет мне все. Кроме того, я хотел бы иметь возможность сохранять выбранные несколько кнопок, например "красный" и "синий", которые отображали бы мне красные и синие. Если я снова нажму на один из них, он оставит другой выбранный и спрячет переработанные. Это должно работать в сочетании с другими фильтрами, и они должны работать одинаково, с функцией переключения. Это даже достижимо? Я попытался объединить плагин изотопных множественных фильтров из вышеупомянутой ссылки с isoSelective, взятый из этой скрипки, но не повезло.

Вот код, который я использовал, и скрипку, которую я создал, но она не работает

$(function(){

var $container = $('#tiles .inner'),
    filters = {};

 $container.isotope({
    animationOptions: {
        duration: 1000,
        queue: false
    },
    itemSelector : '.tile',
    masonry: {
        columnWidth: 130,
        gutterWidth: 41
    }
});

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

  var $optionSet = $this.parents('.filter');
  // 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');
  // convert object into array
  var isoFilters = [];
  for ( var prop in filters ) {
    isoFilters.push( filters[ prop ] )
  }
  var selector = isoFilters.join('');
  $container.isotope({ filter: selector });
//$container.isoSelective({
//      filter: '.filter-nav',
//      attrSelector: 'data-filter'
//});
  return false;
});

});

http://jsfiddle.net/AcFAe/

Любая помощь приветствуется. заранее спасибо

Теги:
filter
toggle

1 ответ

0

isoSelective использует метод .live() в одной точке, который вообще был удален в jQuery 1.9.

Вам понадобится jquery-migrate. Jquery-migrate не работает для меня.

Я только что обновил isoSelective, чтобы быть совместимым с jQuery 1. 9+: https://github.com/simmerdesign/jquery-isoselective

Ещё вопросы

Сообщество Overcoder
Наверх
Меню