Как я могу объединить эти три изотопных фильтра - PullRequest
Новая
       42

Как я могу объединить эти три изотопных фильтра

0 голосов
/ 17 апреля 2019

Я использую плагин Isotope для создания расширенной фильтрации для предстоящих шоу моего театра.Мне нравится простота плагина, и он почти работает.Тем не менее, я не могу закончить это.То, как я устанавливаю фильтры, упоминается в отдельных примерах, но не в комбинированном примере, представленном Isotope, и я не могу заставить его работать самостоятельно.

Я создал три отдельных фильтра:

  • Фильтр по жанру с помощью раскрывающегося списка
  • Фильтр по месяцам с помощью раскрывающегося списка
  • Поиск по ключевому словуиспользуя поле ввода

По отдельности все они работают.

Но всякий раз, когда вы фильтруете с помощью раскрывающихся списков, два других полностью игнорируются.И поиск по ключевому слову работает только при первом запуске (поэтому, прежде чем щелкнуть любой раскрывающийся список)

Код трех отдельных частей: 

var $quicksearch = $('.quicksearch').keyup( debounce( function() {
  qsRegex = new RegExp( $quicksearch.val(), 'gi' );
  $grid.isotope();
}) );

$('#genreDropDown').on( 'change', function( event ) { 
    var genreSelectie = $("#genreDropDown :selected").val();
    var genreSelectieGoed = genreSelectie.charAt(0).toUpperCase() + genreSelectie.slice(1)
    if(document.getElementById('genreDropDown').value == "genre") { 
        $grid.isotope({ filter: '*' });
    }
    else {
        $grid.isotope({
            filter: function() {
                var type = $(this).find('.wpt_production_category').text();
                return type.match( genreSelectieGoed );
            }
        });
    }
});

$('#maandDropDown').on( 'change', function( event ) {
    var maandSelectie = $("#maandDropDown :selected").val();
    if(document.getElementById('maandDropDown').value == "alleMaanden") { 
            $grid.isotope({ filter: '*' });
            }
    else {
        $grid.isotope({
                filter: function() {
                var type = $(this).find('.wp_theatre_event_datetime').text();
                return type.match( maandSelectie );
                }

        });
    }
});

Это мой кодовый блок .Большая часть кода получена из этого codepen , но, поскольку я использую раскрывающиеся списки, операторы if / else в отдельных функциях и немного регулярных выражений для поиска элементов, создание подходящей комбинации вне моих знаний,Вот почему я надеюсь, что кто-то здесь может мне помочь.

...