精炼jQuery选择器

Question

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

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

如果选择2个不同类型的规格，则产品应与BOTH选择匹配。

如果选择3个规格，2个来自同一类型，另一个来自另一个类型，则产品应该与单一类型中的选择匹配，而选择中有2个相同类型的选择。

示例：

类型可以是尺寸＆amp;颜色。

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

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

我使用现有功能创建了一个代码段：

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

您需要添加,：

＆＃13;

＆＃13;

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

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

sClasses = '';
jQuery('.Spec:checked').each(function (i) {
    sClasses += '.SP_' + jQuery(this).attr('TypeID') + '_' + jQuery(this).attr('ValueID');
    sClasses += jQuery('.Spec:checked').length-1 === i ? "":", "; // you need to add this line
});

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

console.log(sClasses)

jQuery(sClasses).fadeIn(200);

});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以创建一个像

这样的选择器

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;