Итак, вот что вы можете сделать: встроить каждый тег audio в теги div рядом с тегами img.Таким образом, у вас будет гораздо меньше проблем с поиском соответствующего элемента audio, когда вы активируете один из элементов img.
Вот новая структура:
<div class="container">
<div class="down music">
<img id="batman" src="#">
<audio id="batman" src="sounds/batman.wav"></audio>
</div>
<div class="up music">
<img id="bane" src="#">
<audio id="bane" src="sounds/ceremony.mp3"></audio>
</div>
<div class="down music">
<img id="joker" src="#">
<audio id="joker" src="sounds/free.wav"></audio>
</div>
<div class="up music">
<img id="alfred" src="#">
<audio id="alfred" src="sounds/mud.wav"></audio>
</div>
</div>
Осторожнос идентификаторами, но здесь это не имеет значения, так как мы не собираемся их использовать.
Далее, с помощью JavaScript, мы будем:
выбрать всю музыку div s:
const roll = [...document.querySelectorAll('.music')];
Я использую деструктуризациюсинтаксис для преобразования NodeList из HTMLElement с в объект Array из HTMLElement с.
Цикл всех элементов этого массива, т. е. все воспроизведение div s.Вместо использования цикла for я использую метод .map непосредственно в массиве.Это намного лучше.Метод создает новый массив с результатами вызова предоставленной функции обратного вызова для каждого элемента в roll.
roll.map(function callback())
Аргумент, переданный обратному вызову, является элементом roll (здесь он называется * 1039).*)
В функции обратного вызова мы используем querySelector для e, чтобы найти дочерний элемент img.Затем мы подключаем к нему прослушиватель событий:
e.querySelector('img').addEventListener('mouseover', function insideCallback());
addEventListener также требуется функция обратного вызова.Он просто выберет дочерний элемент audio и вызовет для него метод play():
e.querySelector('img').addEventListener('mouseover', () => {
e.querySelector('audio').play()
});
Итак, окончательный код:
const roll = [...document.querySelectorAll('.music')];
roll.map(e => {
e.querySelector('img').addEventListener('mouseover', () => {
e.querySelector('audio').play()
});
});
<div class="container">
<div class="down music">
<img id="batman" src="#">
<audio id="batman" src="sounds/batman.wav"></audio>
</div>
<div class="up music">
<img id="bane" src="#">
<audio id="bane" src="sounds/ceremony.mp3"></audio>
</div>
<div class="down music">
<img id="joker" src="#">
<audio id="joker" src="sounds/free.wav"></audio>
</div>
<div class="up music">
<img id="alfred" src="#">
<audio id="alfred" src="sounds/mud.wav"></audio>
</div>
</div>