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的每个div上单独运行一个过滤器，但是我希望能够将3个selects组合为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();  

});

这是相应的笔：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。希望这对其他人有帮助！

如何使用jQuery根据某些类过滤div

2 个答案: