组合同位素过滤过滤功能、按钮过滤器和搜索

问题描述

我正在尝试使用 Isotope 来显示卡片并对其进行过滤。我希望用户能够使用搜索字段和 3 个具有可切换选项的不同过滤器的组合进行过滤。 3 个可切换过滤器中有 2 个通过 data-filter 属性将过滤器值传递给 jQuery 脚本。另一个可切换过滤器使用 data-filter 属性将脚本引用到过滤器函数。

我能够使用我在网上找到的脚本获得所有 3 个可切换选项：

[https://codepen.io/flinch85/pen/bGdOQqv][1]
[https://codepen.io/desandro/pen/JEojz][2]
[https://isotope.metafizzy.co/filtering.html][3]

现在我也让搜索功能起作用，使用过滤功能的 1 个可切换选项不再起作用。无论我尝试什么，我都无法让它发挥作用。我认为我的 jQuery 知识不足以组合我找到的 2 个脚本。也许有人可以将我推向正确的方向：

使用函数过滤的选项 1：

<a class="dropdown-item" href="#!" data-filter="max7daysago">Jonger dan 7 dagen</a>
<a class="dropdown-item" href="#!" data-filter="min7daysago">Ouder dan 7 dagen</a>
<a class="dropdown-item" href="#!" data-filter="min14daysago">Ouder dan 14 dagen</a>
<a class="dropdown-item" href="#!" data-filter="min30daysago">Ouder dan 30 dagen</a>

var filterFns = {
    max7daysago: function() {
        var number = $(this).data('daysago');
        return parseInt( number,10 ) <= 7;
    },min7daysago: function() {
        var number = $(this).data('daysago');
        return parseInt( number,10 ) > 7;
    },min14daysago: function() {
        var number = $(this).data('daysago');
        return parseInt( number,10 ) > 14;
    },min30daysago: function() {
        var number = $(this).data('daysago');
        return parseInt( number,10 ) > 30;
    }
};

选项 2 和 3 使用数据属性进行过滤：

<a class="dropdown-item" href="#!" data-filter="[data-priority='high']">Hoog</a>
<a class="dropdown-item" href="#!" data-filter="[data-priority='low']">Laag</a>

$('.button-group').on('click','a',function() {
    var $this = $(this);
    var $buttonGroup = $this.parents('.button-group');
    var filterGroup = $buttonGroup.attr('data-filter-group');
    buttonFilters[ filterGroup ] = $this.attr('data-filter');
    buttonFilter = concatValues( buttonFilters );
    $grid.isotope();
});

和搜索字段：

<input autofocus class="form-control form-control-sm bg-light quicksearch" id="zoeken" type="text" placeholder="Zoek een onderwerp"/>

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

其余代码：

    function debounce( fn,threshold ) {
    var timeout;
    threshold = threshold || 100;
    return function debounced() {
        clearTimeout( timeout );
        var args = arguments;
        var _this = this;
        function delayed() {
        fn.apply( _this,args );
        }
        timeout = setTimeout( delayed,threshold );
    };
}

function concatValues( obj ) {
    var value = '';
    for ( var prop in obj ) {
        value += obj[ prop ];
    }
    return value;
}


var buttonFilters = {};
var buttonFilter;
var qsRegex;

var $grid = $('.filter').isotope({
itemSelector: '.filter-item',getSortData : {
    time : function () {
    return $('.filter-item').attr('data-date');
    }
},sortBy : 'time',sortAscending : true,filter: function() {
    var $this = $(this);
    var searchResult = qsRegex ? $this.text().match( qsRegex ) : true;
    var buttonResult = buttonFilter ? $this.is( buttonFilter ) : true;
    return searchResult && buttonResult;
}
});

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）