时间戳

首页 > 解决方案 > 两级过滤器 OR/AND

javascript - 两级过滤器 OR/AND

问题描述

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

这意味着您可以在过滤器 1 中选择一个选项，在过滤器 2 中选择任意数量的选项

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

被过滤的元素列表具有特定的类，首先是一个月（使用过滤器 1 过滤），然后是类别（使用过滤器 2 过滤）

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

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

到目前为止，它有效

The idea is that when a second category is selected, it has to display the elements from that specific month and with EITHER one of the categories selected

例子：

过滤器 1：七月

过滤器 2：社会、活动

结果：

Event (July Societies) --> 只是类别之一

活动（七月活动）-> 只是其中一个类别

Event (July Societies $ Campaigns) --> 两个类别

我为此创建了一个小提琴

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

标签： javascriptjqueryhtml

解决方案

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

对于所选的每个类别，将其与所选月份连接，然后将它们与,.

例子：

过滤器 1：七月

过滤器 2：社会、活动

=> 选择器创建：.event_item.july.societies, .event_item.july.campaigns

工作小提琴

推荐阅读