Question

您好我已经使用此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>

实时搜索和下拉工作，但它们不能一起工作。在进行搜索时，它会发现内容应该 - 隐藏不相关的内容 - 但是当使用下拉列表进行过滤时，它似乎会重置或忽略实时搜索所做的过滤。有没有让两个函数一起工作，并可能将脚本合并到一个脚本中？

感谢任何帮助。

Answer 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（过滤器）在这里很重要。

$('.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 });
    }
});

额外：关键字事件中的去抖功能

// 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 );
    }
}

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

1 个答案: