Javascript 多个单选按钮作为过滤器 问题

我正在尝试创建一个双过滤器，您可以在其中组合来自多个类别的过滤器。例如，第一类过滤器为年份，第二类过滤器为介质类型。我想让你只通过年份、媒体类型或两者过滤x年类型的媒体（20世纪60年代的音乐）。此外，我还试图突出显示选定的过滤器，以便您可以跟踪哪些过滤器处于活动状态（我尝试将其设置为粗体，第一组过滤器可以使用，但第二组过滤器无法使用。如何解决此问题

代码笔

企图

过滤器选择（“全部”）
函数过滤器选择（c）{
变量x，i；
x=document.getElementsByClassName（“filterDiv”）；
如果（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

.filterDiv{
浮动：左；
背景色：白色；
颜色：黑色；
宽度：37vw；
线高：100px；
文本对齐：居中；
保证金：5px；
显示：无；
右边距：15px；
}
.表演{
显示：块；
}
.集装箱{
边缘顶部：20px；
溢出：隐藏；
}
/*设计按钮的样式*/
.btn{
边界：无；
大纲：无；
填充：0；
右边填充：40px；
背景色：白色；
光标：指针；
字体大小：16px；
字体大小：正常；
}
.btn:悬停{}
.btn.active{
字体大小：粗体；
}
.内容{
字体大小：16px；
线高：20px；
文本对齐：左对齐；
}

全部展示
1950
1960
1970


所有媒体
影视
音乐
报纸



1950年的报纸《我的知识》是一位杰出的献身者，他在劳动和财富的临时契约上发表了自己的观点。但是，在最低限度上，他是一位杰出的劳动实践者，他是一名普通消费者。
1960年的音乐知识，是一位杰出的献身者，他在工作和生活中都有自己的时间。但是，在生活中，他是一位杰出的实践者，他是一名普通消费者。
1960年的报纸《知识产权》杂志刊登了一篇文章，描述了一位杰出人士，他在劳动和财富方面的临时贡献。但在最低限度上，他在公共消费方面的工作是不合格的。

您有一个javascript中的document.getElementsByCassName（）函数，在这里可能会对您有所帮助。 文件： 您可以获得一个元素数组，这些元素与您想要的目标类相匹配，然后可以对它们进行迭代，以添加/删除隐藏属性或css类，从而显示或隐藏它们。 同样的道理也适用于你想要加粗的按钮

伪代码示例：

Click the RED filter
   Iterate over all elements on the page and
      If it has the RED class, make hidden property = false
      Otherwise, make hidden property = true
   Then, iterate over all buttons of type COLOUR
      If it's the RED button, add it the css class for btn_active
      Otherwise, remove the btn_active class

如果点击按钮就是全部，那么逻辑就有点不同了，但这只是一个玩If-else的问题

请记住，每个元素上都有addClass和removeClass方法。您不必将类列表转换为类数组并对其进行迭代。这要简单得多：

---

最简单的方法是使用

和

type=“radio”

输入。
您可以设置内部

元素的样式，该元素与

:checked

输入相邻（

+

）

将筛选器引用（PROP）存储到以空格分隔的

数据filterable=“value1 value2 valueZ”

中。

诀窍在于：

• 在更改事件中，将选中的输入值作为数组获取
• 隐藏所有元素（添加一个

  。隐藏

  类）
• 根据

  数据可过滤属性（也作为数组）中是否存在所有选中的值，获取要显示的筛选元素子集

以下示例适用于任意数量的过滤器集：

const el_filters=document.queryselectoral（'[name=“year”]，[name=“type”]'），
el_filterable=document.queryselectoral（“[data filterable]”）；
常量applyFilter=（）=>{
//过滤检查输入
常量el_checked=[…el_filters].filter（el=>el.checked&&el.value）；
//将选中的输入值收集到数组
常量过滤器=[…el_已选中].map（el=>el.value）；
//获取要筛选的元素
常量el_filtered=[…el_filteredable]。过滤器（el=>{
const props=el.getAttribute（'data-filterable'）.trim（）.split（/\s+/）；
返回筛选器。每个（fi=>props.includes（fi））
});
//全部隐藏
el_filterable.forEach（el=>el.classList.add（'is-hidden'）；
//显示过滤
el_filtered.forEach（el=>el.classList.remove（'is-hidden'）；
}
//分配事件侦听器
el_filters.forEach（el=>el.addEventListener（'change'，applyFilter））；
//初始化
applyFilter（）；

/*过滤器输入*/
.过滤器{
垫底：5px；
}
.filterInputs输入{
显示：无；
}
.filterInputs标签{
显示：内联块；
位置：相对位置；
填充：10px 20px；
光标：p