筛选多个类别的产品

Question

我正在为网上商店构建产品过滤器。 目前有 3 个类别（产品属性），但类别的数量可能会有所不同。 我已经完成了这项极其简单的任务，但没有 100% 满足我需要的解决方案。 搜索了 SO，但找不到与我的问题完全匹配的内容。

现在我有一些代码工作，只显示具有确切属性的产品。 问题是这太局限了。

这是我现在过滤产品的代码，过滤器不需要从服务器获取数据，所有产品都可用并且具有过滤器值的 class：

JS

 $('.choice_form').change(function(evt){

        var filter = $(':input:checked,select').map(function(index, el) {
            return "." + el.value;
        }).toArray().join("");

        $(".vis-products").hide().filter(filter).show();

    });

HTML：

<div class="categories default-text">
  <!-- choice help -->
  <div class="choicehelp-wrapper">
    <b class="black">Basisdeel</b><br><label class="noselect choicehelp_text"><input type="checkbox" name="choice_option[]" value="ft12" class="choice_form js" data-group="product" data-action="choicehelp" data-value="12" data-id="1" style="margin:6px 0px 6px 0px">&nbsp;&nbsp;Kunststof, zwart</label><br>
    <label class="noselect choicehelp_text"><input type="checkbox" name="choice_option[]" value="ft13" class="choice_form js" data-group="product" data-action="choicehelp" data-value="13" data-id="1" style="margin:6px 0px 6px 0px">&nbsp;&nbsp;Messing, nikkel</label><br><br><b class="black">Insteek</b><br>
    <label class="noselect choicehelp_text"><input type="checkbox" name="choice_option[]" value="ft11" class="choice_form js" data-group="product" data-action="choicehelp" data-value="11" data-id="2" style="margin:6px 0px 6px 0px">&nbsp;&nbsp;Knie insteek koppeling</label><br><label class="noselect choicehelp_text"><input type="checkbox" name="choice_option[]" value="ft9" class="choice_form js" data-group="product" data-action="choicehelp" data-value="9" data-id="2" style="margin:6px 0px 6px 0px">&nbsp;&nbsp;Rechte inschroef koppeling</label><br>
    <label class="noselect choicehelp_text"><input type="checkbox" name="choice_option[]" value="ft10" class="choice_form js" data-group="product" data-action="choicehelp" data-value="10" data-id="2" style="margin:6px 0px 6px 0px">&nbsp;&nbsp;T-inschroef koppeling</label><br><br><b class="black">Inschroef</b><br>
    <label class="noselect choicehelp_text"><input type="checkbox" name="choice_option[]" value="ft7" class="choice_form js" data-group="product" data-action="choicehelp" data-value="7" data-id="3" style="margin:6px 0px 6px 0px">&nbsp;&nbsp;M4 Diameter</label><br><label class="noselect choicehelp_text"><input type="checkbox" name="choice_option[]" value="ft4" class="choice_form js" data-group="product" data-action="choicehelp" data-value="4" data-id="3" style="margin:6px 0px 6px 0px">&nbsp;&nbsp;M5 Diameter</label><br>
    <label class="noselect choicehelp_text"><input type="checkbox" name="choice_option[]" value="ft6" class="choice_form js" data-group="product" data-action="choicehelp" data-value="6" data-id="3" style="margin:6px 0px 6px 0px">&nbsp;&nbsp;M8 Diameter</label><br><label class="noselect choicehelp_text"><input type="checkbox" name="choice_option[]" value="ft8" class="choice_form js" data-group="product" data-action="choicehelp" data-value="8" data-id="3" style="margin:6px 0px 6px 0px">&nbsp;&nbsp;M9 Diameter</label> </div>
</div>

以及产品html：

<div class="visnav3 vis-products vis-catalog js ft11 ft12 filterOn" data-group="product" data-action="goto-details" data-id="111111" data-value="DEMO-2" style="">....</div>

ftxx 类对应于复选框值。

有点太多了，你可以在这里查看： https://www.technicomponents.nl/nl/p/pneumatiek/insteekkoppelingen/knie-koppelingen/

它应该这样做：

案例 1. 如果您只单击 1 个过滤器，则所有具有该过滤器作为类名的产品都应该可见

案例 2. 如果您 select 例如 2 个或更多来自 1 个类别的过滤器，则所有具有选定过滤器为 class 的产品都应该可见。

案例 3. 如果您 select 来自多个类别的一个或多个值，它应该类似于：

在哪里

第一类：
- 过滤器 x 或
- 过滤 y 或
- 过滤器 z 或

和

第 2 类：
- 过滤器 x 或
- 过滤 z 或

和

第三类：
- 过滤 y 或
- 过滤器 z 或

当前代码仅适用于 select 1 值（来自一个或多个类别）。

Answer 1

您需要一种方法来了解input属于哪个组，以便您知道何时应用 AND 逻辑以及何时应用 OR 逻辑。 在我看来，您在data-id属性中有这样的信息。 我将假设该属性对于属于同一组的输入具有相同的值，并且当输入在不同的组中时它是不同的。 （如果这不正确，只需选择能够做出这种区分的东西）。

您可以使用 CSS 逗号执行 OR 操作。 然后，AND 操作可以作为 jQuery filter方法的连续调用来执行。

这是这个想法的一个非常简化的演示：

 $("input").change(function () { var filters = {}; // key/value per group $(':input:checked,select').each(function(index, el) { var group = $(el).data("id"); // <-- something that identifies the group filters[group] = (filters[group] || []).concat("." + el.value); }); var $filtered = $(".vis-products").hide(); // Apply each filter on the result of the previous one: for (var group in filters) $filtered = $filtered.filter(filters[group].join(",")); $filtered.show(); });

 .filter { width: 100px; float: left; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <div class="filter"> Cat 1:<br> <input type="checkbox" data-id="1" value="a">a<br> <input type="checkbox" data-id="1" value="b">b<br> Cat 2:<br> <input type="checkbox" data-id="2" value="i">i<br> <input type="checkbox" data-id="2" value="j">j<br> <input type="checkbox" data-id="2" value="k">k<br> Cat 1:<br> <input type="checkbox" data-id="3" value="x">x<br> <input type="checkbox" data-id="3" value="y">y<br> </div> Data:<br> <div class="vis-products aix">ai x</div> <div class="vis-products aiy">ai y</div> <div class="vis-products ajx">aj x</div> <div class="vis-products ajy">aj y</div> <div class="vis-products akx">ak x</div> <div class="vis-products aky">ak y</div> <div class="vis-products bix">bi x</div> <div class="vis-products biy">bi y</div> <div class="vis-products bjx">bj x</div> <div class="vis-products bjy">bj y</div> <div class="vis-products bkx">bk x</div> <div class="vis-products bky">bk y</div>