Javascript 带有复选框和滑块过滤器的jQuery

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

如您所见，有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'
         });
        }
});

---

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

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

不同版本之间以及如何组合过滤器存在差异：

V1:.red或.toll，您可以同时传入一个筛选器选择器：.red.toll

V2:.red或.toll，您可以传入一个筛选器选择器，该选择器同时为：.red、.toll

filters = filters.join(', ');

---

请看一看，我相信你能自己解决剩下的问题

我自己决定。我只是加了一句

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

一开始,

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

在复选框函数中，我用

filter: filters

因此，每个项目在开始时都有“show me”类，如果数字不对应，则使用范围滑块删除该类

---

如果我更改

filters=filters.join（“”），则编辑的JSFIDLE为

to

filters=filters.join（'，'）我得到添加参数的复选框。我希望复选框缩小参数范围，这就是我创建的。我的脚本：大+黄色只返回大黄色框。我的脚本与您发布的更改：大+黄色返回所有大框+所有黄色框，这不是我想要的。我的问题在其他地方，即操作滑块和复选框，允许我进一步缩小范围。我确信我不知道这到底是为了什么，但在你的示例中，如果你只使用滑块，所有框都会消失，这在我看来是错误的，因为用户应该能够使用任何过滤器来缩小框的选择范围。谢谢，我决定添加
filters=filters.join（“”）
。现在JSFiddle应该可以了。
filter: filters