如何在javascript中检查数组的值到另一个数组

Question

我正在创建地图;我想使用 Array 向每个位置添加一些信息。 例如：我有 3 个div 和一个具有三个长度的数组(div 的信息(。 现在，每当我将鼠标悬停在div 上时，它都应该将属性 (elID( 与数组进行比较，并获取 head 或 Paragraph 等信息。

例如 HTML：

<div  id="container">
<div elID = "first">first</div>
<div elID = "second">second</div>
<div elID = "third">third</div>
</div>

我在Javascript中做了什么：

const locations = [
{"location": "first", "head":"This is first the head", "paragraph":"kommtNoch"},
{"location": "second", "head":"This is the second head", "paragraph":"kommtNoch"},
{"location": "third", "head":"This is the third head", "paragraph":"kommtNoch"} ]
const red = document.querySelectorAll('#container > div');
for(i=0; i<red.length;i++){
red[i].setAttribute('onmouseover', 'myFirstFunction(this)');
function myFirstFunction(e){
if(e.classList === locations.indexOf()){
console.log(locations[i].location);
}

我在这里找到了一些答案，但它们对我来说很难理解：

检查一个数组是否包含 JavaScript 中另一个数组的任何元素

Answer 1

我不完全确定您要查找什么功能，但是您可以在每个元素上设置一个事件侦听器以侦听鼠标悬停事件，并获取elID，您可以使用getAttribute。要在数组中获取正确的对象，可以使用find：

const locations = [
{"location": "first", "head":"This is first the head", "paragraph":"kommtNoch"},
{"location": "second", "head":"This is the second head", "paragraph":"kommtNoch"},
{"location": "third", "head":"This is the third head", "paragraph":"kommtNoch"}
]
const red = document.querySelectorAll('#container > div');
const handleMouseOver = e => {
const o = locations.find(o => e.target.getAttribute('elID') === o.location)
e.target.innerText = o.head
}
red.forEach(el => el.addEventListener('mouseover', handleMouseOver))

<div id="container">
<div elID="first">first</div>
<div elID="second">second</div>
<div elID="third">third</div>
</div>

同样，我不确定您要做什么，但听起来您还想添加更多事件侦听器来处理mouseleave事件，以还原更改。