Javascript 使用JS按多个类别过滤？

我目前正在一个网站上工作，该网站展示了我看过的所有电影的视觉表现。如果你愿意的话，可以给我一张电影列表。我知道如何使用JS根据按钮按下情况过滤列表，但是，它一次只能过滤1个按钮。我希望列表根据多个按钮进行筛选

例如：“所有完成的电影的评分为3，动作类型*”

或者：“所有已完成和观看电影”

我从未学过JS（尽管我计划最终会学），所以我有点迷茫于如何做到这一点

以下是我当前的代码：

过滤器选择（“全部”）
函数过滤器选择（c）{
var eles=document.getElementsByClassName（“弹性卡”）；
对于（变量i=0；i

.card:hover.overlay{
显示：无；
}
.btn:悬停{
背景色：hsl（14,80%，70%）；
}
.displayNone{
显示：无；
}
黄先生{
颜色：hsl（14,80%，70%）；
}
.标题{
颜色：白色；
}
.按钮容器{
保证金：0px 0px 12px；
文本对齐：居中；
垫底：12px；
}
.btn{
颜色：hsl（14,80%，30%）；
背景色：hsl（43,83%，55%）；
边框：1px实心rgba（0,0,0,0.94）；
边界半径：10px；
文本对齐：居中；
字号：600；
字体大小：10px；
线高：20px；
宽度：80px；
保证金：5px 0px 5px 5px；
填充：0px 12px；
}
.柔性容器{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
证明内容：中心；
左：15%；
右：15%；
}
/*我使用的是7:10的纵横比（宽：高）*/
.弹性卡{
位置：相对位置；
高度：265px；
宽度：185px；
透视图：1000px；
右边距：1rem；
边缘底部：1rem；
}
.a{
}
.卡片{
位置：相对位置；
宽度：100%；
身高：100%；
转换：转换0.6s0s；
变换样式：保留-3d；
盒影：0 4px 8px 0 rgba（0,0,0,0.2）；
}
.形象{
对象匹配：覆盖；
宽度：100%；
身高：100%；
}
.覆盖{
位置：绝对位置；
底部：0；
背景色：rgba（0,0,0,0.7）；
宽度：100%；
转换：.1s易用性；
}
.头衔{
文本对齐：居中；
颜色：白色；
字体大小：14px；
字号：600；
利润率：8px；
}
.副标题{
利润率：8px；
字体大小：12px；
字号：600；
文本对齐：居中；
}

新页
电影列表
全部的
看
计划
完整的
下降


5.
4.
3.
2.
1.


行动
恐怖
浪漫
等
等

可以将所有单击的选择器存储在一个数组中，并根据整个数组的状态（而不仅仅是最后单击的按钮）渲染卡片。快速而肮脏的示例可能如下所示：

const allCards=document.queryselectoral（“.flex-card”）；
var displayAll=true//用于显示全部的特殊值-默认值true
var activeCards=[]//包含所有选定值的数组
功能切换选择器（c）{
如果（c==‘全部’）{
displayAll=！displayAll
活动卡=[]//可选
返回
}
displayAll=false
if（活动卡。包括（c））{
activeCards=activeCards.filter（card=>card！==c）
}否则{
活动卡。推送（c）
}
}
//快速渲染卡片的脏方法
函数renderCards（）{
如果（显示全部）{
allCards.forEach（卡片=>showCard（卡片））
返回
}
所有卡片。forEach（卡片=>hideCard（卡片））
对于（所有卡片中的卡片）{
for（let cardClass of card.classList）{
if（活动卡。包括（卡类））{
展示卡（卡片）
打破
}
}
}
}
//每次单击时，切换单击的选择器并重新渲染卡
函数过滤器选择（c）{
切换选择器（c）
renderCards（）
}
功能展示卡（card）{
card.classList.remove（“displayNone”）；
}
功能隐藏卡（卡）{
card.classList.add（“displayNone”）；
}
renderCards（）

.card:hover.overlay{
显示：无；
}
.btn:悬停{
背景色：hsl（14,80%，70%）；
}
.displayNone{
显示：无；
}
黄先生{
颜色：hsl（14,80%，70%）；
}
.标题{
颜色：白色；
}
.按钮容器{
保证金：0px 0px 12px；
文本对齐：居中；
垫底：12px；
}
.btn{
颜色：hsl（14,80%，30%）；
背景色：hsl（43,83%，55%）；
边框：1px实心rgba（0,0,0,0.94）；
边界半径：10px；
文本对齐：居中；
字号：600；
字体大小：10px；
线高：20px；
宽度：80px；
保证金：5px 0px 5px 5px；
填充：0px 12px；
}
.柔性容器{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
证明内容：中心；
左：15%；
右：15%；
}
/*我使用的是7:10的纵横比（宽：高）*/
.弹性卡{
位置：相对位置；
高度：265px；
宽度：185px；
透视图：1000px；
右边距：1rem；
边缘底部：1rem；
}
.a{
}
.卡片{
位置：相对位置；
宽度：100%；
身高：100%；
转换：转换0.6s0s；
变换样式：保留-3d；
盒影：0 4px 8px 0 rgba（0,0,0,0.2）；
}
.形象{
对象匹配：覆盖；
宽度：100%；
身高：100%；
}
.覆盖{
位置：绝对位置；
底部：0；
背景色：rgba（0,0,0,0.7）；