如何使用jQuery根据特定的类过滤div

Question

我正在尝试为div列表创建一个过滤系统，这些div列表包含一系列基于类内容的类。因此，如果我在1select中选择了一个选项，则可见选项将根据该类名进行更改。然后我又有两个带有不同值的选择，我试图使用它们来使“过滤器”更加具体。我知道如何分别做这些过滤器，但我不知道如何将函数组合成一个多类检查。我尝试过使用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，让我对每个select的所有div单独运行一个过滤器，但我希望能够将3个select合并成1个函数，该函数检查选定类的所有div，并显示它们是否都存在，如果不存在，则隐藏它们。

我最近尝试的两次尝试如下：(第一次尝试被注释掉，最新的一次仍处于活动状态。两者都不起作用...)

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

如果有人建议我做错了什么，或者我应该从哪里开始，那就太好了，谢谢！