Как получить функцию обратного вызова для записи значения атрибута данных при наведении курсора мыши? - PullRequest
Новая
       45

Как получить функцию обратного вызова для записи значения атрибута данных при наведении курсора мыши?

0 голосов
/ 05 апреля 2020

Итак, у меня есть список 'li', который я выбрал, и я использую для l oop, чтобы добавить слушатель события mouseover для каждого из этих тегов. 

<ul>
    <li data-animal="horse">Animal 1</li>
    <li data-animal="dog">Animal 2</li>
    <li data-animal="cat">Animal 3</li>
</ul>

И я остановился, потому что функция обратного вызова должна регистрировать значение каждого атрибута данных , когда мышь двигается над ним. Как мне этого добиться? 

const mouseOverLoop = document.querySelectorAll("li");
for (let i = 0; i < mouseOverLoop.lenght; i++) {
  mouseOverLoop[i].addEventListener("mouseover", hoverOver);
}
function hoverOver() {
  console.log();
}

Ответы [ 2 ]

0 голосов
/ 05 апреля 2020 
<ul id="animals">
    <li data-animal="horse">Animal 1</li>
    <li data-animal="dog">Animal 2</li>
    <li data-animal="cat">Animal 3</li>
</ul>

document.getElementById("animals").addEventListener("mouseover", function({ target: { dataset } }) {
  if (dataset.animal) {
    console.log(dataset.animal);
  }
});
0 голосов
/ 05 апреля 2020

Есть 2 проблемы:

  • Опечатка должна быть mouseOverLoop.length (не lenght)

  • console.log() не имеет строки для регистрации.

Вы можете использовать свойство target события, чтобы идентифицировать соответствующий элемент, и метод getAttribute, чтобы получить значение атрибута. 

function hoverOver(e) {
   console.log(e.target.getAttribute('data-animal'));
}


const mouseOverLoop = document.querySelectorAll("li");
for (let i = 0; i < mouseOverLoop.length; i++) {
  console.log(mouseOverLoop[i]);
  mouseOverLoop[i].addEventListener("mouseover", hoverOver);
}
function hoverOver(e) {
   console.log(e.target.getAttribute('data-animal'));
}
<ul>
    <li data-animal="horse">Animal 1</li>
    <li data-animal="dog">Animal 2</li>
    <li data-animal="cat">Animal 3</li>
</ul>
...