javascript - 两级滤波器或/与

Question

我创建了一个 2 级过滤器，其中第一个过滤器是 OR，第二个过滤器是 AND

这意味着您可以在筛选器 1 中仅选择一个选项，并在筛选器 2 中选择任意多个选项

此过滤器通过使用类来工作

要过滤的元素列表具有特定的类别，首先是月份(使用过滤器 1 过滤)，然后是类别(使用过滤器 2 过滤)

使用过滤器时，如果过滤器 1 选择了月份，则会显示以该月份为类的元素

但是一旦选择了类别，它就必须显示该月和该类别的元素

到目前为止，它是有效的

这个想法是，当选择第二个类别时，它必须显示该特定月份的元素以及选择的任一类别

<小时/>

示例:

过滤器 1:七月

过滤器 2:社团、事件

结果:

事件(七月社团)--> 仅其中一个类别

事件(七月事件)--> 仅其中一个类别

事件(七月社团 $ 事件)--> 两个类别

I've created a fiddle for this

$('.press').click( function() {
    const checked = $(":checked");
    var filtered = "";

    if (checked.length === 0) {
        return $(".event_item").show();
    }

    $(".event_item").hide();

    checked.each(function() {
        filtered = filtered + "." + this.id;
    });

    $(".event_item" + filtered ).show();
});

Answer 1

由于您的 radio 和复选框以两种不同的方式工作，因此您需要创建两个变量，一个用于 [type="radio"]:checked ，另一个用于 [type="checkbox"]:checked 并形成选择器以从中显示。

对于选定的每个类别，将其与选定的月份连接起来，然后使用 , 将它们连接起来。

示例:

过滤器 1:七月

过滤器 2:社团、事件

=> 创建选择器:.event_item.july.societies、.event_item.july.campaigns

Working fiddle