如何组合 2 个同位素过滤器 javascript 函数？答案

【问题标题】：How to combine 2 isotope filter javascript functions?如何组合 2 个同位素过滤器 javascript 函数？
【发布时间】：2013-01-11 14:11:02
【问题描述】：

您好，我已经使用此 js 代码成功设置了具有多个下拉菜单的同位素过滤 -

jQuery(function() {
    var $container = $('#isocontent'),
        $select = $('div#filterGroup select');
    filters = {};

    $container.isotope({
        itemSelector: '.box'
    });
    $select.change(function() {
        var $this = $(this);

        var $optionSet = $this;
        var group = $optionSet.attr('data-filter-group');
        filters[group] = $this.find('option:selected').attr('data-filter-value');

        var isoFilters = [];
        for (var prop in filters) {
            isoFilters.push(filters[prop])
        }
        var selector = isoFilters.join('');

        $container.isotope({
            filter: selector
        });

        return false;
    });

});

在同一页面上，我可以使用 quicksearch.js 插件和同位素设置实时搜索输入字段 -

<script type="text/javascript">
            $(function () {
                $('input#id_search').quicksearch('#isocontent.box');
});
        </script>
<script type="text/javascript">
$(function() {

   var $container = $('#isocontent');


   $container.isotope({
        itemSelector: '.box'
    });


    $('input#filter').quicksearch('#isocontent .box', {
        'show': function() {
            $(this).addClass('quicksearch-match');
        },
        'hide': function() {
            $(this).removeClass('quicksearch-match');
        }
    }).keyup(function(){
        setTimeout( function() {
            $container.isotope({ filter: '.quicksearch-match' }).isotope(); 
        }, 100 );
    });

});
 </script>

实时搜索和下拉菜单可以工作，但它们不能一起工作。进行搜索时，它会找到应有的内容 - 隐藏不相关的内容 - 但在使用下拉菜单进行过滤时，它似乎会重置或忽略实时搜索完成的过滤。有没有办法让这两个函数一起工作，并可能将脚本合并为一个脚本？？

感谢任何帮助，谢谢。

【问题讨论】：

标签： javascript jquery jquery-plugins filtering jquery-isotope

【解决方案1】：

这是我的做法。

首先，我注册了一个简单的文本过滤器。

然后，如果单击按钮，我会通过重新定义它来“扩展”这个过滤器（通过将函数传递给同位素的过滤器选项）。

如果没有点击任何按钮，我会重新注册简单文本过滤器。

同位素初始化：

var qsRegex; // global variable

var $grid = $(container).isotope({
    resizable: true,
    masonry: {
        columnWidth: columnWidth
    },
    filter: function() {
        return qsRegex ? $(this).text().match( qsRegex ) : true;
    }
});

然后我在输入上的 keyup 事件：

var tabPane = $('.tab-pane.active');
var $quicksearch = tabPane.find('.quicksearch').unbind().keyup( debounce( function() {

    qsRegex = new RegExp($quicksearch.val(), 'gi');
    $grid.isotope();

}, 200 ) );

然后我在按钮上的点击事件： （简体）

$(this).hasClass(filter) 的添加在这里很重要。

$('.gender-switch').click(function() {

    if ($(this).hasClass('active') == false) {
        var filter = $(this).attr('data-filter');
        var my_combined_filter = function() {
            return qsRegex ? ($(this).text().match( qsRegex ) && $(this).hasClass(filter))  : true;
        }
        $('.tab-pane.active .gallery').isotope({ filter: my_combined_filter });
    } else {
        // none of the buttons have been selected.
        // reset to the simple filter
        $('.tab-pane.active .gallery').isotope({ filter: '*' });
        var my_simple_filter = function() {
            return qsRegex ? $(this).text().match( qsRegex ) : true;
        }
        $('.tab-pane.active .gallery').isotope({ filter: my_simple_filter });
    }
});

额外：keyup 事件中的 debounce 功能

// debounce so filtering doesn't happen every millisecond
function debounce( fn, threshold ) {
    var timeout;
    return function debounced() {
        if ( timeout ) {
            clearTimeout( timeout );
        }
        function delayed() {
            fn();
            timeout = null;
        }
        timeout = setTimeout( delayed, threshold || 100 );
    }
}

【讨论】：