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

Question

我正在创建地图；我想使用 Array 向每个位置添加一些信息。 例如：我有 3 个 div 和一个具有三个长度的数组（div 的信息）。 现在，每当我将鼠标悬停在 div 上时，它应该将属性 (elID) 与 Array 进行比较，并获取 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);
                }

我在这里找到了一些答案，但我很难理解：

Check if an array contains any element of another array in 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 事件，以恢复更改。