Javascript 将类添加到js元素

在下面的代码中，如何向每个位置标记添加类？我需要添加一个类，这样我就可以在悬停时为两个标记触发不同的图像

我在这张地图的右边有一个文本框，所以当你在每行文本上悬停时，我希望它高亮显示相关的地图生成器并更改标记图像

var map=new mapboxgl.map({
容器：“映射”，
风格：'mapbox://styles/mapbox/light-v10',
中间：[2.143,41.388]，
缩放：12
});
//下一步的代码将转到这里！
var geojson={
键入：“位置”，
特点：[{
键入：“位置”，
几何图形：{
键入：“点”，
座标：[2.174520,41.388851]
},
特性：{
标题：“特拉法加6号”，
描述：“西班牙巴塞罗那，特拉法加，68010”
}
},
{
键入：“位置”，
几何图形：{
键入：“点”，
座标：[2.109630，41.383520]
},
特性：{
标题：“胡安·卡洛斯·费尔蒙特”，
描述：“阿文古达对角线，66167108028巴塞罗那，西班牙”
}
}
]
};
//向地图添加标记
geojson.features.forEach（函数（标记）{
//为每个功能创建一个HTML元素
var el=document.createElement（'div'）；
el.className='marker'；
//为每个要素制作一个标记并添加到地图中
新mapboxgl.标记（el）
.setLngLat（标记、几何、坐标）
.setPopup（新的mapboxgl.Popup({
抵销：25
})//添加弹出窗口
.setHTML（“”+marker.properties.title+''+marker.properties.description+'
'））
.addTo（地图）；
});
//使用“滚动”时禁用地图缩放
map.scrollZoom.disable（）；
//向地图添加缩放和旋转控件。
var nav=新的mapboxgl.NavigationControl({
罗盘：错，
showZoom：对
});
地图添加控制（导航，“左上”）
正文{
保证金：0；
填充：0；
}
#地图{
位置：绝对位置；
排名：0；
底部：0；
宽度：100%；
高度：500px；
}
.马克{
背景图像：url（'https://cdn.glitch.com/83d2fce6-58e7-4b74-8ce5-b1a43ae0945a/thumbnails/unnamed.png?1592467484333');
背景尺寸：封面；
宽度：35px；
高度：35px；
光标：指针；
}
.标记器：悬停{
背景图像：url（'https://cdn.glitch.com/83d2fce6-58e7-4b74-8ce5-b1a43ae0945a/Elijah logo.png？1592453844803’；
}


您可以作为
mapboxgl画布容器标记访问标记




单击后，您可以访问
mapboxgl弹出内容



var map=new mapboxgl.map({
容器：“映射”，
风格：'mapbox://styles/mapbox/light-v10',
中间：[2.143,41.388]，
缩放：12
});
//下一步的代码将转到这里！
var geojson={
键入：“位置”，
特点：[{
键入：“位置”，
几何图形：{
键入：“点”，
座标：[2.174520,41.388851]
},
特性：{
标题：“特拉法加6号”，
描述：“西班牙巴塞罗那，特拉法加，68010”
}
},
{
键入：“位置”，
几何图形：{
键入：“点”，
座标：[2.109630，41.383520]
},
特性：{
标题：“胡安·卡洛斯·费尔蒙特”，
描述：“阿文古达对角线，66167108028巴塞罗那，西班牙”
}
}
]
};
//向地图添加标记
geojson.features.forEach（函数（标记）{
//为每个功能创建一个HTML元素
var el=document.createElement（'div'）；
el.className='marker'；
//为每个要素制作一个标记并添加到地图中
新mapboxgl.标记（el）
.setLngLat（标记、几何、坐标）
.setPopup（新的mapboxgl.Popup({
抵销：25
})//添加弹出窗口
.setHTML（“”+marker.properties.title+''+marker.properties.description+'
'））
.addTo（地图）；
});
//使用“滚动”时禁用地图缩放
map.scrollZoom.disable（）；
//向地图添加缩放和旋转控件。
var nav=新的mapboxgl.NavigationControl({
罗盘：错，
showZoom：对
});
地图添加控制（导航，“左上”）；
document.getElementById（“map”）.addEventListener（“鼠标悬停”，函数（e）{
常数tgt=e.target；
if（tgt.classList.contains（“mapboxgl弹出内容”））{
//tgt.style.border=“3px纯红色”；
如果（！tgt.id）tgt.id=tgt.querySelector（“h3”）.textContent.replace（/\s+/g，“\”）
}
});
[…document.queryselectoral（“.mapboxgl canvas container.marker”）].forEach（（marker，i）=>marker.id=“marker”+（i+1））
常数hoverIt=e=>{
常数tgt=e.target；
如果（tgt.id==“滚动1”| | tgt.id===“滚动2”）{
常数类型=e.type
const over=type==“mouseenter”；
const id=“marker”+tgt.id.replace（“翻滚”）；
document.getElementById（id）.classList.toggle（“悬停”，结束）；//这对标志没有任何影响！
}  
};
document.getElementById（“容器”）.addEventListener（“鼠标指针”，hoverIt）
document.getElementById（“容器”）.addEventListener（“mouseleave”，hoverIt）
正文{
保证金：0；
填充：0；
}
#地图{
位置：绝对位置；
排名：0；
底部：0；
宽度：100%；
高度：500px；
}
.马克{
背景图像：url（'https://cdn.glitch.com/83d2fce6-58e7-4b74-8ce5-b1a43ae0945a/thumbnails/unnamed.png?1592467484333');
背景尺寸：封面；
宽度：35px；
高度：35px；
光标：指针；
}
.标记器：悬停{
背景图像：url（'https://cdn.glitch.com/83d2fce6-58e7-4b74-8ce5-b1a43ae0945a/Elijah logo.png？1592453844803’；
}
#特拉法加6号{
边框：1px纯绿色；
}
#marker1{
背景色：红色；
}
#marker1.hover{background image=url(https://cdn.shopify.com/s/files/1/0051/9628/3977/t/7/assets/pf-b3c6e0ef--Locationshero.jpg?v=1589772232) }
#marker2{
背景颜色：绿色；
}
#marker2.hover{background image=url(https://cdn.shopify.com/s/files/1/0051/9628/3977/t/7/assets/pf-fdd801e3--Fairmont.jpg?v=1589773965)}

位置
胡安·卡洛斯·费尔蒙特
单击后，您可以访问
mapboxgl弹出内容
您的意思是什么？我不知道
[...document.querySelectorAll("mapboxgl-canvas-container marker")]
  .forEach((marker,i) => marker.id = "marker"+i)

document.getElementById("map").addEventListener("mouseover",function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("mapboxgl-popup-content")) {
    // tgt.style.border="3px solid red";
    if (!tgt.id) tgt.id = tgt.querySelector("h3").textContent.replace(/\s+/g,"_");
  }
})