带有复选框和滑块过滤器的jQuery同位素

jQuery isotope with checkboxes and slider filters

本文关键字：过滤器 jQuery 同位素 复选框      更新时间：2023-09-26

我创建了一个包含jQuery同位素和各种过滤器的页面。下面是简化的 JSFiddle：

https://jsfiddle.net/itzuki87/21kfqhop/17/

如您所见，有 3 个过滤器：2 个复选框和 1 个范围滑块。如果单独使用，所有过滤器都可以很好地工作，但是当我将它们组合使用时，它只能使用上次使用的过滤器。这是因为我在使用范围滑块时使用".show-me"类，在使用复选框时使用其他类。

范围滑块：

$("#range").ionRangeSlider({
        hide_min_max: true,
        keyboard: true,
        min: 0,
        max: 150,
        from: 20,
        to: 110,
        type: 'double',
        step: 1,
        prefix: "€",
        grid: true,
        onChange: function(data) {
            $(".grid-item").each(function(){
            price = parseInt($(this).find(".price").text(), 10);
            if (data.from <= price && data.to >= price) {
                $(this).addClass('show-me');
            }
            else {
                $(this).removeClass('show-me');
            }
            });
            $container.isotope({
             itemSelector: '.grid-item',
             filter: '.show-me'
         });
        }
});

复选框：

$checkboxes.on('change', function(){
    filters = [];       
    $checkboxes.filter(':checked').each(function(){
        filters.push(this.value);
    });     
    filters = filters.join('');
    $container.isotope({
        filter: filters
    });     
});

如何使两种类型的过滤器同步工作？谢谢。

我自己解决了。我只是简单地添加了

$(".grid-item").addClass("show-me");
filters.push(".show-me");

一开始，

filters.push(".show-me");

在复选框功能中，我用

filter: filters

因此，每个项目的开头都有"show-me"类，如果数字不对应，则使用范围滑块将其删除。

编辑后的 JSfiddle https://jsfiddle.net/21kfqhop/23/

您根据旧版本的同位素创建了示例

http://isotope.metafizzy.co/v1/demos/combination-filters.html

版本之间以及筛选器的组合方式之间存在差异：

V1：.red 或 .tall，您可以传入两者的过滤器选择器：.red.tall

V2：.red 或 .tall，您可以传入两者的过滤器选择器：.red、.tall

filters = filters.join(', ');

请看一下 http://codepen.io/desandro/pen/JGKyrY，我相信您将能够自己弄清楚其余的。

相关文章：