Javascript弹出窗口？

所以我要做的是一张带有标记的

德国地图。
当点击一个标记时，
div
（content）
会显示一些内容

有没有办法让
JavaScript
知道我点击了哪个标记，它会打开相应的content div，总共大约有200个标记，所以它一定是一个相当有效的代码，而我对
JavaScript
的了解不是很好

这是我目前的代码

<div class="map">
  <img src="/images/map.jpg">
</div>

<div class="markers" style="top: 60%; left: 35%;">
  <div class="content" style="display: none;">
    <h1>Test</h1>
    <p>test</p>
  </div>
</div>

<div class="markers" style="top: 20%; left: 60%;">
  <div class="content" style="display: none;">
    <h1>Test2</h1>
    <p>test2</p>
  </div>
</div>


试验
试验

测试2
测试2

基本思想是使用事件委派，并聆听家长的点击。您可以确定单击了什么，还可以切换类以显示隐藏的元素。基本思想：


document.querySelector（“.map wrapper”）.addEventListener（“单击”，函数（e）{
//查找是否单击了标记
var marker=e.target.closest（'.marker'）；
console.log（标记器）
//有人点击了吗？
如果（标记）{
//隐藏可能显示的任何其他内容
var active=document.querySelector（'.marker.active'）；
如果（活动和活动！==标记）{
active.classList.remove（'active'）；
}
//切换信息，使其显示/隐藏
marker.classList.toggle（'active'）；
}
});
.map包装器{
位置：相对位置；
背景色：#中交；
宽度：400px；
高度：400px；
}
.马克{
位置：相对位置；
}
.marker：：之后{
内容：“无需添加任何ID或其他方法来标识要显示的正确内容

为每个标记添加一个点击事件监听器，并在元素上切换一个类。其余的可以通过CSS完成


//查找所有.markers元素
const markers=document.queryselectoral（'.markers'）；
//在标记中循环
markers.forEach（（marker）=>{
//将事件侦听器添加到每个.marker
marker.addEventListener（'click'，（e）=>{
if（e.currentTarget.classList.contains（'active'））{
//如果单击的元素处于活动状态，请将其停用。。。
e、 currentTarget.classList.remove（'active'）；
}否则{
//…否则，停用任何其他活动标记。。。
removeClass（标记“活动”）；
//…并激活已单击的.marker
e、 currentTarget.classList.add（'active'）；
}
})
});
//Helper函数，用于从元素集合中删除类
函数removeClass（els，类名）{
els.forEach（（el）=>{
el.classList.remove（className）；
});
}
.markers{
边框：1px实心#e6；
}
.标记.内容{
显示：无；
}
.markers.active.content{
显示：块；
}


标记1

试验
试验


标记2

测试2
测试2

请包含Javascript代码。没有是你可以在HTML中的每个标记中添加一个ID，并使用其ID与Javascript一起访问它们是的，我也考虑过这一点，但我在代码效率方面遇到了问题。我要做的是为200个标记创建相同的脚本，但必须有更好的方法，使用一个脚本200个标记对吗？数据属性。。。。。