Javascript 如何使用HTML按钮实现简单的递归过滤器

我想使用简单的HTML按钮/javascript添加递归过滤器。到目前为止，我只能添加一级过滤器。我想做的是-允许用户分两个阶段选择过滤器。例如，用户应该能够在体验范围“10+”上进行过滤，然后在下一阶段（如“操作”）上进行进一步过滤。因此，这样只显示符合10+经验和操作的配置文件

我已经能够为一个阶段添加过滤器和逻辑。也就是说，代码在经验范围（5-8、8-10、10+）上工作和过滤，但无法实现过滤的第二阶段（IT、操作等）

过滤器选择（“全部”）
函数过滤器选择（c）{
变量x，i；
x=document.getElementsByClassName（“列”）；
如果（c==“全部”）c=“”；
对于（i=0；i-1）w3AddClass（x[i]，“show”）；
}
}
函数w3AddClass（元素、名称）{
变量i，arr1，arr2；
arr1=element.className.split（“”）；
arr2=name.split（“”）；
对于（i=0；i-1）{
arr1.拼接（arr1.indexOf（arr2[i]），1）；
}
}
element.className=arr1.join（“”）；
}
//将活动类添加到当前按钮（高亮显示）
var btnContainer=document.getElementById（“myBtnContainer”）；
var btns=btnContainer.getElementsByClassName（“btn”）；
对于（变量i=0；i

*{
框大小：边框框；
}
身体{
背景色：#f1f1；
填充：20px；
字体系列：Arial；
}
/*中心网站*/
梅因先生{
最大宽度：1000px；
保证金：自动；
}
h1{
字体大小：50px；
单词break：打破一切；
}
.行{
利润率：8px-16px；
}
/*在每列之间添加填充*/
一行
.row>列{
填充：8px；
}
/*创建四个相邻浮动的相等列*/
.栏目{
浮动：左；
宽度：25%；
显示：无；
/*默认情况下隐藏所有元素*/
}
/*清除行后的浮动*/
.罗：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
/*内容*/
.内容{
背景色：白色；
填充：10px；
}
/*“show”类被添加到过滤的元素中*/
.表演{
显示：块；
}
/*设计按钮的样式*/
.btn{
边界：无；
大纲：无；
填充：12px 16px；
背景色：白色；
光标：指针；
}
.btn:悬停{
背景色：#ddd；
}
.btn.active{
背景色：#666；
颜色：白色；
}
/*响应式布局-将四列布局改为两列布局*/
@媒体屏幕和屏幕（最大宽度：900px）{
.栏目{
宽度：50%；
}
}
/*响应式布局-使两列堆叠在彼此的顶部，而不是相邻*/
@媒体屏幕和屏幕（最大宽度：600px）{
.栏目{
宽度：100%；
}
}

全部展示
5-8
8-10
10+
操作
制造业
abc
8+在石油和天然气、制造业方面的经验

def
10+石油和天然气、制造业经验

ghi
13+IT项目管理经验

稍作调整和简化，但假设可以按您的需要工作；-）
如果您感到高兴，请按“接受”按钮（在“投票”下）

var filtersList={}；
filterSelection（document.getElementsByName（“myBtnContainer”）[0]。children[0]）；
函数重命名ALL（i）{
返回i.替换（“全部显示”、“全部”）；
}
函数过滤器选择（当前）{
变量x，i；
var c=renameAll（current.innerText.trim（））；
var buttons=document.getElementsByName（“myBtnContainer”）；
var组=电流；
做{
group=group.parentElement；
if（group.getAttribute（“name”）=“myBtnContainer”）{
对于（i=0；i-1）{
匹配的过滤器[组]+；
}
}
//此处显示技巧2个二进制数或逻辑表-每个位表示组中的非零数字（匹配>0/选定过滤器>0）-希望正常工作；-）
var matched=（！！matchedFilters[0]）+（！！matchedFilters[1]）*2；
变量过滤器=（！！过滤器编号[0]）+（！！过滤器编号[1]）*2；
if（（匹配的和过滤器）=过滤器和（过滤器！=0））{
w3AddClass（记录[i]，“显示”）；
}
}
更新按钮（按钮、过滤器编号）；
}
函数更新按钮（按钮、过滤器编号）{
过滤器编号[0]=0；
过滤器编号[1]=0；
对于（i=0；i.列）{
填充：8px；
}
/*创建四个相邻浮动的相等列*/
.栏目{
浮动：左；
宽度：25%；
显示：无；
/*默认情况下隐藏所有元素*/
}
/*清除行后的浮动*/
.罗：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
/*内容*/
.内容{
背景色：白色；
填充：10px；
}
/*“show”类被添加到过滤的元素中*/
.表演{
显示：块；
}
/*设计按钮的样式*/
.btn{
边界：无；
大纲：无；
填充：12px 16px；
背景色：白色；
光标：指针；
}
.btn:悬停{
背景色：#ddd；
}
.btn.active{
背景色：#666；
颜色：白色；
}
/*响应式布局-将四列布局改为两列布局*/
@媒体屏幕和屏幕（最大宽度：900px）{
.栏目{
宽度：50%；
}
}
/*响应式布局-使两列堆叠在彼此的顶部，而不是相邻*/
@媒体屏幕和屏幕（最大宽度：600px）{
.栏目{
宽度：100%；
}
}

全部展示
5-8
8-