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

Posted 2023-05-09

【中文标题】如何组合 2 个同位素过滤器 javascript 函数？

【英文标题】：How to combine 2 isotope filter javascript functions?

【发布时间】：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>

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

感谢任何帮助，谢谢。

【参考方案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 );