优化 jQuery 选择器

Question

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

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

如果 select 有 2 种规格，每一种都来自不同的类型，产品应该与两种 select 离子相匹配。

如果 select 有 3 个规格，2 个来自同一类型，1 个来自另一种类型，则产品应匹配来自单一类型的 selection，以及 [=44= 中的任何一个]离子，其中有 2 个相同类型。

示例：

类型可以是尺码和颜色。

I select "Large" 来自尺寸，"Red" 来自颜色。显示的产品为大号和红色。

I select "Large" 来自尺寸，"Red" 和 "Blue" 来自颜色。显示的产品为大号和（红色或蓝色）。

我用我现有的函数创建了一个片段：

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>

目前您会看到，如果您 select 红色和蓝色，则没有匹配的记录，因为它会尝试查找具有这两个类的产品。

Answer 1

您需要添加一个,：

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

});

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

您可以像这样创建一个选择器

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>

优化 jQuery 选择器

Refining jQuery selector

javascript

jquery

jquery-selectors