Question

我正在使用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 );
                }

        });
    }
});

This is my codepen。大多数代码都是从此codepen派生的，但是由于我在单独的函数中使用下拉菜单，if / else语句以及一些正则表达式来查找项目，因此我不知道如何创建合适的组合。这就是为什么我希望这里有人可以帮助我。

如何结合这三个同位素过滤器

0 个答案: