Filter 我如何通过一个按钮在图库中的图像之间交换？

我想知道如何通过点击按钮在我今天早上创建的图库中显示/隐藏img

我目前关于这部分的代码是：

函数open1（）{
document.getElementById（'img1'）.classList.toggle（“打开”）；
}
函数open2（）{
document.getElementById（'img2'）.classList.toggle（“打开”）；
}
函数open3（）{
document.getElementById（'img3'）.classList.toggle（“打开”）；
}
函数open4（）{
document.getElementById（'img4'）.classList.toggle（“打开”）；
}
函数open5（）{
document.getElementById（'img5'）.classList.toggle（“打开”）；
}
函数open6（）{
document.getElementById（'img6'）.classList.toggle（“打开”）；
}
函数open7（）{
document.getElementById（'img7'）.classList.toggle（“打开”）；
}
函数open8（）{
document.getElementById（'img8'）.classList.toggle（“打开”）；
}

正文{
显示：网格；
网格模板列：重复（6，1fr）；
网格模板行：4.375rem 60.625rem 33.75rem 102.6875rem 103.75rem 74.375rem 11.1875rem；
间隙：0px 20px；
}
按钮，a，#按钮{
显示：内联块；
字体系列：“Poppins”，无衬线；
颜色：#fff；
字体大小：14px；
背景色：#22cfb5；
边界：无；
宽度：170px；
高度：30px；
边界半径：15px；
文字装饰：无；
文本对齐：居中；
光标：指针；
}
#content-4按钮{
字体系列：“Poppins”，无衬线；
字号：700；
文本对齐：居中；
字体大小：14px；
边界：无；
高度：22px；
边界半径：11px；
背景色：白色；
颜色：#6633ff；
}
#内容-4.关于{
背景色：#5341f2；
颜色：白色；
}
#项目1、项目2、项目3、项目4、项目5、项目6、项目7、项目8{
显示：块；
边界半径：15px；
溢出：隐藏；
}
.视觉项目{
宽度：200px；
边界半径：15px；
}
氢{
字体系列：“Poppins”，无衬线；
字号：700；
文本对齐：居中；
字体大小：32px；
线高：46px；
}  
.颜色{
颜色：#5341f2；
}
#内容-4{
显示：网格；
网格模板列：重复（8，1fr）；
网格模板行：重复（21,3.6875rem）；
网格行间距：20px；
放置项目：中心；
}
#含量-4 h2{
格构柱：2/6跨；
网格行：1/2跨；
}
#内容-4#过滤器1{
格构柱：4/2跨；
网格行：2个/跨度2；
}
#内容-4#过滤器2{
格构柱：3/4跨；
网格行：3个/跨度1；
}
#内容-4#过滤器3{
格构柱：4/2跨；
网格排：3个/跨度2；
}
#内容-4#过滤器4{
格构柱：3/4跨；
网格行：3个/跨度3；
}
#内容-4#过滤器5{
格构柱：4/2跨；
网格行：3/4跨；
}
#项目1、项目2、项目3、项目4、项目5、项目6、项目7、项目8{
宽度：200px；
高度：117px；
}
#项目1{
格构柱：2/6跨；
网格排：5个/跨度3；
}
#项目2{
格构柱：2/6跨；
网格行：7/跨3；
}
#项目3{
格构柱：2/6跨；
网格行：9/3跨；
}
#项目4{
格构柱：2/6跨；
网格行：11/span 3；
}
#项目5{
格构柱：2/6跨；
网格行：13/跨3；
}
#项目6{
格构柱：2/6跨；
网格排：15个/跨度3；
}
#项目7{
格构柱：2/6跨；
网格行：17/跨3；
}
#项目8{
格构柱：2/6跨；
网格行：19/跨度3；
}
#img1、img2、img3、img4、img4、img5、img6、img7、img8{
显示：无；
位置：固定；
z指数：9996；
宽度：100%；
排名：0；
底部：0；
背景：rgba（0,0,0,0.8）；
对齐项目：居中；
证明内容：中心；
溢出x：隐藏；
}
#img1.open、#img2.open、#img3.open、#img4.open、#img5.open、#img6.open、#img7.open、#img8.open{
显示器：flex；
}
#img1 img、img2 img、img3 img、img4 img、img5 img、img6 img、img7 img、img8 img{
宽度：90%；
}

Mes项目
吹牛
视觉识别
印刷品
网状物
标志