Как проверить значение массива для другого в javascript

Question

Я создаю карту; Я хочу добавить некоторую информацию в каждое место, используя массив. Пример: у меня есть 3 div и массив, который имеет три длины (информация для div). Теперь всякий раз, когда я нахожу указатель мыши на элемент div, он должен сравнивать атрибут (elID) с массивом и получать такую ​​информацию, как head или Paragraph.

Ex из 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 событие, чтобы отменить изменения.