Javascript 单击链接时使用链接'；s ID查找具有特定类的div，该类与保存在数组中的链接的ID相同

我有一个数组，它存储从锚链接获取的ID，并将它们应用于特定的div。我需要其ID已通过数组应用于div的链接，以在单击打开作为覆盖/模式工作的特定div时打开该链接。我在尝试使用时被卡住了：

$（'[id^=“覆盖框-”]）。单击（函数（）{
if（$（'.overlay box'）.hasClass（$this））{
$（'.overlay box'）.fadeIn（'slow'）；
}
})

这是行不通的

Html是：

这些ID存储在一个数组中。并应用于该类别的div：

因此，它们在页面加载时输出为：

css是

//覆盖框
.覆盖框{
显示：无；
位置：固定；
}
.覆盖框{
宽度：100vw；
高度：100vh；
//位置：绝对位置；
//最高：0%；
//左：0%；
背景色：rgba（0,0,0,0.5）；
z指数：10000；
溢出：可见；
背景滤镜：模糊（4px）；
-o-背景滤光片：模糊（4px）；
-ms背景滤镜：模糊（4px）；
-moz背景滤镜：模糊（4px）；
-webkit背景滤镜：模糊（4px）；
}

如前所述，我面临的问题是，一旦单击上面的一个锚定链接，就会在锚定链接所涉及的特定div中淡出Jquery/JS

目前我的JS是：

var overlayarray=$（'.overlay open'）.map（函数（i）{
返回此.id；
});
$（“.overlay box”）。每个（函数（索引）{
$（this.addClass（overlayarray[index]）；
});
$（'[id^=“覆盖框-“]”）。单击（函数（）{
if（$（'.overlay box'）.hasClass（$this））{
$（'.overlay box'）.fadeIn（'slow'）；
}
})

我知道最后一部分不起作用

我也试过这个

$（'.overlay open'）。单击（函数（）{
$（此）。每个（功能（i）{
var currentId=$（this.attr（'id'）；
if（$（'.overlay box'）.hasClass（currentId））{
$（'.overlay box'）.fadeIn（'slow'）；
}
});
});

也不起作用，当我使用下面的时，它会打开所有div

$（'[id^=“覆盖框-”]）。单击（函数（）{
$（'.overlay box'）.fadeIn（'slow'）；
});

您可以这样做：

您可以直接在

document.querySelector（“.overlay box.”+a.id）

中使用CSS进行选择，从中提取单击链接的id，并在选择器中使用它：

单击id为的链接时：

overlay-box-three

使用它，然后用类搜索元素：

.overlay box.overlay box three

示例使用

文档。查询选择器

：

[…document.querySelectorAll（“a.overlay-open”）].forEach（a=>{
a、 addEventListener（'单击'，事件=>{
event.preventDefault（）；
document.querySelector（“.overlay box.”+a.id）.style.display=“block”；
console.clear（）；
console.log（a.id）
})
});
.overlay框{
显示：无；
}
覆盖框覆盖框一
覆盖框覆盖框2
覆盖框覆盖框三
覆盖框覆盖框4
覆盖框覆盖框5
if（'.overlay-box'.hasClass（$this））{
要添加到@Taplar的注释中，
if（'.overlay-box'.hasClass（$this））{
到
if（$（'.overlay-box'）.hasClass（$this））对于未来的引用，考虑到这只是HTML+CSS+JS，你可能想考虑包含一个代码示例。它会保护更多的答案，因为它更容易调试，我知道这个问题，问我做什么不对代码……我已经提供了所有必要的，一个链接，DI。vs和JS？