我是HTML和JS的新手。我的代码产生了我想要的效果，但它是重复的。我为链接(锚标签(使用了不同的 ID，并为每个 ID 分别编写了 JS 代码(两者完全相同(。我将在我的网页中再有十个这样的链接，所以一次又一次地编写相同的代码段真的很愚蠢。我知道一定有办法避免这种重复，但我在互联网上找不到它。
我对这个问题的想法是，将 ID 存储在数组中，然后在这些 ID 上运行"for 循环"(鼠标悬停和鼠标输出功能将在循环内(。如果这是可能的，如何做？如果没有，请建议其他方式。
这是代码(查看"body"中的"脚本"标签(。
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<style>
.name
{
color:black;
font-family:calibri light;
float:left;
}
.vertical
{
border-left:1px solid #a5a5a5;
height:20px;
margin-left:20px;
margin-right:25px;
float:left;
}
.statement
{
color:black;
font-family:calibri light;
}
</style>
</head>
<body>
<a href="link1.html" style="text-decoration: none">
<div id="link1">
<span id="name1" class="name">link1</span>
<span id="ver1" class="vertical"></span>
<span id="statement1" class="statement">Put your mouse over here</span>
</div>
</a>
<br>
<a href="link2.html" style="text-decoration: none">
<div id="link2">
<span id="name2" class="name">link2</span>
<span id="ver2" class="vertical"></span>
<span id="statement2" class="statement">Put your mouse over here</span>
</div>
</a>
<script>
function mouseover1()
{
$('span#name1').css('font-family','calibri')
$('span#ver1').css('border-left','2px solid #a5a5a5')
$('span#statement1').css('font-family','calibri')
}
function mouseout1()
{
$('span#name1').css('font-family','calibri light')
$('span#ver1').css('border-left','1px solid #a5a5a5')
$('span#statement1').css('font-family','calibri light')
}
function mouseover2()
{
$('span#name2').css('font-family','calibri')
$('span#ver2').css('border-left','2px solid #a5a5a5')
$('span#statement2').css('font-family','calibri')
}
function mouseout2()
{
$('span#name2').css('font-family','calibri light')
$('span#ver2').css('border-left','1px solid #a5a5a5')
$('span#statement2').css('font-family','calibri light')
}
$('div#link1').mouseover(mouseover1);
$('div#link1').mouseout(mouseout1);
$('div#link2').mouseover(mouseover2);
$('div#link2').mouseout(mouseout2);
</script>
</body>
</html>你只能用CSS解决所有这些问题。由于性能原因，我不会在这里使用jQuery。
.custom-link {
text-decoration: none;
}
.custom-link .contents {
margin-right: 20px;
color: #000;
font-family: 'Calibri', sans-serif;
font-weight: 300;
}
.custom-link .contents:not(:first-child) {
padding-left: 25px;
border-left: 1px solid #a5a5a5;
}
.custom-link:hover .contents {
font-weight: 500;
}
.custom-link:hover .contents:not(:first-child) {
padding-left: 25px;
border-left-width: 2px;
}<a href="link1.html" class="custom-link">
<div id="link1">
<span id="name1" class="contents name">link1</span>
<span id="statement1" class="contents statement">Put your mouse over here</span>
</div>
</a>
<br>
<a href="link2.html" class="custom-link">
<div id="link2">
<span id="name2" class="contents name">link2</span>
<span id="statement2" class="contents statement">Put your mouse over here</span>
</div>
</a>这样你就可以继续添加元素。您唯一需要做的就是data-link参数唯一，并且应该链接到其他类。
function mouseover() {
var link = $(this).data("link");
console.log(link);
$('span#name'+link).css('font-family', 'calibri')
$('span#ver'+link).css('border-left', '2px solid #a5a5a5')
$('span#statement'+link).css('font-family', 'calibri')
}
function mouseout() {
var link = $(this).data("link");
$('span#name'+link).css('font-family', 'calibri light')
$('span#ver'+link).css('border-left', '1px solid #a5a5a5')
$('span#statement'+link).css('font-family', 'calibri light')
}
$('.linkevent').mouseover(mouseover);
$('.linkevent').mouseout(mouseout);{
color: black;
font-family: calibri light;
float: left;
}
.vertical {
border-left: 1px solid #a5a5a5;
height: 20px;
margin-left: 20px;
margin-right: 25px;
float: left;
}
.statement {
color: black;
font-family: calibri light;
}<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<style>
.name
</style>
</head>
<body>
<a href="link1.html" style="text-decoration: none">
<div id="link1" data-link="1" class="linkevent">
<span id="name1" class="name">link1</span>
<span id="ver1" class="vertical"></span>
<span id="statement1" class="statement">Put your mouse over here</span>
</div>
</a>
<br>
<a href="link2.html" style="text-decoration: none">
<div id="link2" data-link="2" class="linkevent">
<span id="name2" class="name">link2</span>
<span id="ver2" class="vertical"></span>
<span id="statement2" class="statement">Put your mouse over here</span>
</div>
</a>
<script>
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
a.linkcss{
color: red;
}
</style>
<script>
$(document).ready(function(){
$(".link").hover(function(){
$("#"+this.id).addClass("linkcss");
},function(){
$("#"+this.id).removeClass("linkcss");
})
});
</script>
</head>
<body>
<a href="#" class="link" id="link1" >link1</a>
<a href="#" class="link" id="link2" >link2</a>
<a href="#" class="link" id="link3" >link3</a>
</body>
</html>
你可以试试这个它的工作。