如何使用 jQuery 过滤基于某些类的 div

Question

我正在尝试为包含一系列基于其内容的类的 div 列表创建一个过滤系统。因此，如果我在 1 选择中选择一个选项，那么可见选项将根据该类名称而改变。然后我还有 2 个不同值的选择，我试图用它们来使“过滤器”更加具体。我可以弄清楚如何分别执行这些过滤器，但我无法弄清楚如何将函数组合成 1 个多类检查。我曾尝试使用 hasClass()、filter() 和其他几个选项，但我认为这里缺少一些东西。它不想按照我想要的方式工作。

这是一个jsfiddle，我正在努力为一个更大的项目解决这个问题。

首先，我有一组选择：

<select name="select-1" id="select-1">
   <option value="allColors">All</option>
   <option value="Red">Red</option>
   <option value="Blue">Blue</option>
</select>
<select name="select-2" id="select-2">
   <option value="allShapes">All</option>
   <option value="Square">Square</option>
   <option value="Circle">Circle</option>
</select>
<select name="select-3" id="select-3">
   <option value="allStyles">All</option>
   <option value="Solid">Solid</option>
   <option value="Outline">Outline</option>
</select>

然后我有一组不同类的div来区分它们：

<div class="object allColors allShapes allStyles Red Square Solid">
This is a solid, red square.
</div>
<div class="object allColors allShapes allStyles Red Square Outline">
This is a red, square outline.
</div>
<div class="object allColors allShapes allStyles Red Circle Solid">
This is a solid, red circle.
</div>
<div class="object allColors allShapes allStyles Red Circle Outline">
This is a red, circle outline.
</div>
<div class="object allColors allShapes allStyles Blue Square Solid">
This is a solid, blue square.
</div>
<div class="object allColors allShapes allStyles Blue Square Outline">
This is a blue, square outline.
</div>
<div class="object allColors allShapes allStyles Blue Circle Solid">
This is a solid, blue circle.
</div>
<div class="object allColors allShapes allStyles Blue Circle Outline">
This is a blue, circle outline.
</div>

我写了一些 jQuery，它可以让我对每个选择的所有 div 单独运行一个过滤器，但我希望能够将 3 个选择组合成 1 个函数，检查所选类的所有 div，并显示如果它们都在场，则将它们隐藏起来，如果它们不存在，则将它们隐藏起来。

我最近尝试的 2 次尝试如下： （第一次尝试被注释掉了，最新的是仍然活跃的。都没有用...）

jQuery('#selectContainer select').on('change', function() {
var color = '.' + jQuery('#select-1').val();
var shape = '.' + jQuery('#select-2').val();
var style = '.' + jQuery('#select-3').val();
var selectedClasses = (color + ' ' + shape + ' ' + style);

  jQuery('div.object').hide();

/*   if(jQuery('div.object').hasClass(selectedClasses)) {
    jQuery('div.object' + selectedClasses).show();
  } */

  if(jQuery('div.object').hasClass(color) && jQuery('div.object').hasClass(shape) && jQuery('div.object').hasClass(style)) {
    jQuery('div.object' + ' ' + selectedClasses).show();
  }

  console.log(selectedClasses);
});

任何建议我做错了什么，或者我什至应该从哪里开始都会很棒，谢谢！

Answer 1

这里有一个解决方案：

// you can target all of the select fields by just using
// jQuery(#selectContainer select) so that you don't have to write
// a separate onChange function for each individual select field
jQuery('#selectContainer select').on('change', function() {

    // define each of the select fields (color, shape, style)
    var color = '.' + jQuery('#select-1').val();
    var shape = '.' + jQuery('#select-2').val();
    var style = '.' + jQuery('#select-3').val();

    // To check whether an element has multiple classes, you 
    // shouldn't have white space between the class names.
    // e.g. classes will output like this: .class1.class2.class3
    var selectedClasses = (color + shape + style);

    // Hide all divs (will only stay hidden for a few milliseconds)
    jQuery('div.object').hide();

    // Show only the elements that have all three classes
    jQuery(selectedClasses).show();  

});

这是对应的 Pen：https://codepen.io/VisualHarmony/pen/GBqQYp

Answer 2

所以我在朋友的帮助下想通了。正确的 jQuery 应该是：

jQuery('#selectContainer select').on('change', function() {
var color = jQuery('#select-1').val();
var shape = jQuery('#select-2').val();
var style = jQuery('#select-3').val();

  jQuery('div.object').hide();

  jQuery('div.object').each(function() {
    if(jQuery(this).hasClass(color) && jQuery(this).hasClass(shape) && jQuery(this).hasClass(style)) {
    jQuery(this).show();
    }
  });

});

这就是我想要的结果。 Here's the jsfiddle。希望这对其他人有帮助！