我有一个包含多个多选下拉菜单的页面.每个菜单都有一个通用类别,例如:
Box1: Fruits Box2: Veggies
- Peach - Celery
- Orange - Broccoli
- Apple - Spinach
在页面上是每个下拉列表中最多包含一个类的对象.
从下拉列表中选择类时,将根据所选类过滤这些对象,并仅显示包含该类的对象.例如,如果您从第一个下拉菜单中选择"Peach",则会隐藏所有苹果和橘子.(.桃子)
由于您可以从下拉列表中选择多个项目,因此您还可以选择"Apple",同时显示"Apple"和"Peach"对象,但不显示橙色.(.peach,.apple)
或者,您可以选择其中一个蔬菜,它只显示包含两者的对象.(.peach.spinach)
我遇到的问题是我无法弄清楚如何扩展它以便我可以拥有像"((苹果或桃子)和(菠菜或西兰花))的对象那样复杂的东西"我认识到我可以do(.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组合？