javascript - 精炼 jQuery 选择器

Question

我正在构建一个简单的产品过滤器，并将规范分为不同类型。

我希望我的逻辑是这样的:

如果选择 2 个规范，每个规范都来自不同类型，则产品应与两个选择相匹配。

如果选择 3 种规范，其中 2 种来自相同类型，另一种来自另一种类型，则产品应与单一类型的选择相匹配，并且与有 2 种相同类型的选择中的任何一个相匹配。

示例:

类型可以是尺寸和颜色。

我从尺寸中选择“大”，从颜色中选择“红色”。 显示的产品为大号和红色。

我从尺寸中选择“大”，从颜色中选择“红色”和“蓝色”。 显示的产品为大号且(红色或蓝色)。

我使用现有函数创建了一个代码片段:

jQuery('.Spec').click(function () {

jQuery('.Product').fadeOut(200);

sClasses = '';
jQuery('.Spec:checked').each(function () {
    sClasses += '.SP_' + jQuery(this).attr('TypeID') + '_' + jQuery(this).attr('ValueID');
});

if (sClasses === '') {
    sClasses = '.Product'
}

console.log(sClasses)

jQuery(sClasses).fadeIn(200);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="checkbox" id="SP_1" class="Spec" TypeID="1" ValueID="1" /> <label for="SP_42">Large</label>
<input type="checkbox" id="SP_2" class="Spec" TypeID="1" ValueID="2" /> <label for="SP_2">Small</label>

<input type="checkbox" id="SP_3" class="Spec" TypeID="2" ValueID="3" /> <label for="SP_3">Red</label>
<input type="checkbox" id="SP_4" class="Spec" TypeID="2" ValueID="4" /> <label for="SP_4">Blue</label>

<table>
<tr class="Product SP_1_1 SP_2_3"><td>Large red product</td></tr>
<tr class="Product SP_1_1 SP_2_4"><td>Large blue product</td></tr>
<tr class="Product SP_1_2 SP_2_3"><td>Small red product</td></tr>
<tr class="Product SP_1_2 SP_2_4"><td>Small blue product</td></tr>
</table>

此时您将看到，如果您选择红色和蓝色，则没有匹配的记录，因为它会尝试查找同时具有这两个类别的产品。

Answer 1

您可以创建一个选择器，例如

jQuery(function($) {
  var $specs = $('.Spec');

  var types = [];
  $specs.each(function() {
    var type = $(this).attr('TypeID');
    if ($.inArray(type, types) == -1) {
      types.push(type);
    }
  });
  var $products = $('.Product');

  $specs.click(function() {

    var $selected = $products;
    $.each(types, function(i, type) {
      var $checked = $specs.filter('[TypeID="' + type + '"]:checked');
      if ($checked.length) {
        var selector = $checked.map(function(el) {
          return '.SP_' + type + '_' + $(this).attr('ValueID');
        }).get();
        $selected = $selected.filter(selector.join());
      }
    });

    $selected.show();
    $products.not($selected).hide();
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="checkbox" id="SP_1" class="Spec" TypeID="1" ValueID="1" />
<label for="SP_42">Large</label>
<input type="checkbox" id="SP_2" class="Spec" TypeID="1" ValueID="2" />
<label for="SP_2">Small</label>

<input type="checkbox" id="SP_3" class="Spec" TypeID="2" ValueID="3" />
<label for="SP_3">Red</label>
<input type="checkbox" id="SP_4" class="Spec" TypeID="2" ValueID="4" />
<label for="SP_4">Blue</label>

<table>
  <tr class="Product SP_1_1 SP_2_3">
    <td>Large red product</td>
  </tr>
  <tr class="Product SP_1_1 SP_2_4">
    <td>Large blue product</td>
  </tr>
  <tr class="Product SP_1_2 SP_2_3">
    <td>Small red product</td>
  </tr>
  <tr class="Product SP_1_2 SP_2_4">
    <td>Small blue product</td>
  </tr>
</table>