Javascript 如何改进这个简单的图像库代码？

我正在尝试用简单的

html

、

css

和

js

这是到目前为止的代码

$（'.navigation-1'）。单击（函数（）{
$（'.cat-1'）.css（“不透明度”，“1”）；
$（'.cat-2'）.css（“不透明度”，“0”）；
$（'.cat-3'）.css（“不透明度”，“0”）；
$（'.cat-4'）.css（“不透明度”，“0”）；
});
$（'.navigation-2'）。单击（函数（）{
$（'.cat-1'）.css（“不透明度”，“0”）；
$（'.cat-2'）.css（“不透明度”，“1”）；
$（'.cat-3'）.css（“不透明度”，“0”）；
$（'.cat-4'）.css（“不透明度”，“0”）；
});
$（'.navigation-3'）。单击（函数（）{
$（'.cat-3'）.css（“不透明度”，“1”）；
$（'.cat-1'）.css（“不透明度”，“0”）；
$（'.cat-2'）.css（“不透明度”，“0”）；
$（'.cat-4'）.css（“不透明度”，“0”）；
});
$（'.navigation-4'）。单击（函数（）{
$（'.cat-4'）.css（“不透明度”，“1”）；
$（'.cat-1'）.css（“不透明度”，“0”）；
$（'.cat-2'）.css（“不透明度”，“0”）；
$（'.cat-3'）.css（“不透明度”，“0”）；
});
.navigation{
边缘底部：15px；
}
猫先生{
不透明度：0；
位置：绝对位置；
过渡：不透明度0.5s缓进缓出；
}
/*在加载时显示图片*/
.第一类{
不透明度：1；
}

第一类
第2类
第3类
第四类
以下内容如何。。。我在“导航”按钮中添加了“数据索引”属性

单击on按钮可隐藏所有“cat”项目，然后通过使用“数据索引”属性将其作为目标来显示所需项目


$（'.nav'）。单击（函数（）{
$（'.cat'）.css（“不透明度”，“0”）；
var id=$（this）.data（“索引”）；
$（'.cat-'+id）.css（“不透明度”，“1”）；
});
.navigation{
边缘底部：15px；
}
猫先生{
不透明度：0；
位置：绝对位置；
过渡：不透明度0.5s缓进缓出；
}
/*在加载时显示图片*/
.第一类{
不透明度：1；
}

第一类
第2类
第3类
第四类

//得到所有的猫
const cats=document.queryselectoral（“.cat”）
//获取导航容器
const nav=document.querySelector（“.navigation”）
//每只猫
for（设i=0；i{
//使用Array.prototype.slice.call，因为无法迭代节点列表
Array.prototype.slice.call（cats.forEach）（cat=>cat.style.opacity=0）；
chosenCat.style.opacity=1；
};
//将按钮添加到导航容器
导航子对象（按钮）；
}
//显示初始猫
猫[0]。style.opacity=1
.cat{
不透明度：0；
位置：绝对位置；
过渡：不透明度0.5s缓进缓出；
排名：0；
}
.导航{
利润上限：200px；
}

您提出了多个问题，使此问题过于宽泛。另外，一般来说，“如何使其更好”被认为与堆栈溢出无关，因为“使其更好”假设它当前有效，并且您正在尝试重构它以改进它，这不是一个“问题”。查找@Taplar-我知道您来自何方，但我认为这是一个灰色地带，所以我认为说“它正在工作，但我知道它可能会更好，我只是不知道如何”是合理的，我将在以后的参考中使用它@LouyspatricebesetteThanks@freefaller“我只是不知道如何”，在“如何让它变得更好”的上下文中，太宽泛了。没有明确的答案来回答这个问题。