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 OR
  -过滤z OR

AND

类别2：
-过滤器x OR
-过滤z OR

AND

类别3：
-过滤y OR
-过滤z OR

仅当您从一个或多个类别中选择1个值时，当前代码才有效。

Answer 1

您将需要一种方法来了解input属于哪个组，以便知道何时应用AND逻辑以及何时应用OR逻辑。在我看来，您在data-id属性中拥有此类信息。我将假定此属性对于属于同一组的输入具有相等的值，并且当输入位于不同组中时该属性是不同的。（以防万一，请选择确实能与众不同的东西。

您可以使用CSS逗号执行“或”运算。然后，可以将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>

过滤几类产品

1 个答案: