JQuery Isotope - комбинированные фильтры - PullRequest
Новая
       15

JQuery Isotope - комбинированные фильтры

0 голосов
/ 07 мая 2018

Я мог бы использовать некоторую помощь при настройке плагина галереи Isotope !

Я попытался настроить плагин только с одним фильтром, и он работал отлично! НО, теперь я храбрый и пытаюсь использовать два фильтра для галереи, но я не добился успеха, и галерея не работает сейчас. Хотя приведенный ниже код выглядит ошеломляющим, я скопировал и вставил его с сайта Isotope doc.

У меня такое ощущение, что я пропускаю настройку или что-то ... Настройки на сайте документа усложняются, особенно при использовании второго фильтра. Я надеюсь, что кто-то, кто имеет опыт настройки плагина Isotope, может посмотреть мой код ниже (или просмотреть его на CodePen) и увидеть, где я ошибся ...?

JS: 

// init Isotope
var $grid = $('.grid').isotope();

// store filter for each group
var filters = {};

$demo.on( 'click', '.button', function() {
  var $this = $(this);
  // get group key
  var $buttonGroup = $this.parents('.button-group');
  var filterGroup = $buttonGroup.attr('data-filter-group');
  // set filter for group
  filters[ filterGroup ] = $this.attr('data-filter');
  // combine filters
  var filterValue = concatValues( filters );
  $grid.isotope({ filter: filterValue });
});

// flatten object by concatting values
function concatValues( obj ) {
  var value = '';
  for ( var prop in obj ) {
    value += obj[ prop ];
  }
  return value;
}

// filter 
$grid.isotope({ filter: '.ignite-thought' });

// filter 
$grid.isotope({ filter: '.drive-results' });

// filter 
$grid.isotope({ filter: '.focus-on-people' });

// filter 
$grid.isotope({ filter: '.be-your-best-self' });

// filter 
$grid.isotope({ filter: '.monday' });

// filter 
$grid.isotope({ filter: '.tuesday' });

// filter 
$grid.isotope({ filter: '.wednesday' });

// filter 
$grid.isotope({ filter: '.thursday' });

// filter 
$grid.isotope({ filter: '.friday' });

// show all items
$grid.isotope({ filter: '*' });

Показать на CodePen .

1 Ответ

0 голосов
/ 07 мая 2018

Твой почти там. Два вопроса. Во-первых, вы не определили свою переменную $demo, а во-вторых, у вас есть функция щелчка фильтра, предназначенная для класса, который не существует для вашей кнопки.

Define $ demo: 

 var $demo = $('.container';

Назначьте кнопкам фильтра класс нацеливания: 

       <div class="button-group" data-filter-group="color">
        <button class="button" data-filter="">any</button>
         <button class="button" data-filter=".monday">Monday</button>
         ...

Вот обновленный Codepen (я добавил немного CSS для кнопок)

...