Question

我有一个包含多个多选下拉菜单的页面。每个菜单都有一个通用类别，例如：

Box1: Fruits         Box2: Veggies
 - Peach              - Celery
 - Orange             - Broccoli
 - Apple              - Spinach

在页面上是每个下拉列表中最多包含一个类的对象。

从下拉列表中选择类时，将根据所选类过滤这些对象，并仅显示包含该类的对象。例如，如果您从第一个下拉菜单中选择“Peach”，则会隐藏所有苹果和橘子。（.peach）

由于您可以从下拉列表中选择多个项目，因此您还可以选择“Apple”，同时显示“Apple”和“Peach”对象，但不能显示橙色。（.peach，.apple）

或者，您可以选择其中一个蔬菜，它只会显示包含两者的对象。（.peach.spinach）

我遇到的问题是我无法弄清楚如何扩展它以便我可以拥有像“（（苹果或桃子）和（菠菜或西兰花））的对象那样复杂的东西”我认识到我可以做（.apple.spinach，.apple.broccoli，.peach.spinach，.peach.broccoli）然而这似乎最终会变得不必要的复杂，特别是菜单的大小，菜单的数量和数量选择的选项增长（我将示例简化为两个）。

我尝试了几种解决方法，例如：

//:has() does not appear to be useable in this fashion
(:has(.peach, .apple):has(.spinach, .broccoli)) 

//multiple selectors within brackets[] doesn't appear to be supported
([class~='apple', class~='peach'][class~='spinach', class~='broccoli'])

//grouping OR sets doesn't appear to help:
((.peach, .apple)(.spinach, .broccoli))

是否有一些简单的方法可以解决这个问题？或者我是否被迫创建一些重环以生成所有可能的AND组合？

Answer 1

确实可以使用multiple selector来实现OR运算符。要在两个表达式之间实现AND运算符，您可以使用filter()：

// ((Apples OR Peaches) AND (Spinach OR Broccoli))
var matches = $(".peach, .apple").filter(".spinach, .broccoli");

如果您有多个表达式，则可以将呼叫链接到filter()：

// ((Apples OR Peaches) AND (Spinach OR Broccoli) AND (Dragon OR Unicorn))
var matches = $(".peach, .apple")
              .filter(".spinach, .broccoli")
              .filter(".dragon, .unicorn");

Answer 2

您可以这样做：

$(".apple, .peach").filter(".spinach, .broccoli");

它将选择水果，然后从这些水果中选择蔬菜类。

在一般情况下：

var fruits = [".apple", ".peach", /* Rest of your fruits */],
    vegetables = [".broccoli", ".spinach", /* Rest of your vegetables */];

$(fruits.join(",")).filter(vegetables.join(","));

复合JQuery选择器

2 个答案: