javascript - 筛选多个类别的产品

Question

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

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

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

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。例如，如果您从 1 个类别中选择 2 个或更多过滤器，则所有具有所选过滤器作为类别的产品都应该可见。

案例 3. 如果您从多个类别中选择一个或多个值，它应该是这样的:

哪里

第 1 类:
- 过滤器 x OR
- 过滤 y 或
- 过滤 z 或

和

第 2 类:
- 过滤器 x OR
- 过滤 z 或

和

第 3 类:
- 过滤 y 或
- 过滤 z 或

当前代码仅在您选择 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 a i x">a i x</div>
<div class="vis-products a i y">a i y</div>
<div class="vis-products a j x">a j x</div>
<div class="vis-products a j y">a j y</div>
<div class="vis-products a k x">a k x</div>
<div class="vis-products a k y">a k y</div>
<div class="vis-products b i x">b i x</div>
<div class="vis-products b i y">b i y</div>
<div class="vis-products b j x">b j x</div>
<div class="vis-products b j y">b j y</div>
<div class="vis-products b k x">b k x</div>
<div class="vis-products b k y">b k y</div>