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

Question

[Caesar0117]

Здравствуйте, столкнулся с такой проблемой:
Нужно, чтобы при клике на определённый блок с классном 'item' включался трек, заключенный в этом самом блоке. Я попытался сделать это при помощи циклов, проиндексировав каждый элемент. Если в теле цикла указать item[i].addEventListener("click", () => audio[1( или любое другое число, равное не превышающее допустимую длину )].play()), то трек включается, но только тот, что указан в квадратных скобках. Но если указывать в цикле в переменной audio[i], то трек не включается
Как сделать так, чтобы при клике на блок включался именно тот трек, который в нём заключен, при этом, чтобы не приходилось прописывать индекс каждого блока и трека в ручную, как показано в примере моего кода (Пример 2)

Пример 1

<?php
        require 'ARTIST/CYPARISS/#data.php';
                $cnt = count($arr_images);
                for ($i = 0; $i < $cnt; $i++) {
                ?>
                    <div class="item">
                    <div class="song__index"><?php echo $i + 1 ?></div>
                    <img class = 'song__poster' src = 'ARTIST/CYPARISS/<?php echo $arr_images[$i]['poster'] ?>'>
                    <audio class = 'audio' src ='ARTIST/CYPARISS/<?php echo $arr_images[$i]['song'] ?>'></audio>
                    <div class="song"><?php echo $arr_images[$i]['name']?> </div>
                    </div>
            <?php } ?>

Пример 2

let item = document.querySelectorAll('.item')
let img = document.querySelectorAll('.song__poster')
let audio = document.querySelectorAll('audio')
for(i = 0; i < item.length; i++) {
    for(i = 0; i < audio.length; i++) {
        item[0].addEventListener("click", () => audio[0].play())
        item[1].addEventListener("click", () => audio[1].play())
        item[2].addEventListener("click", () => audio[2].play())
    }
}

Пример 3 - PHP код содержащий ссылки на картинки и сами треки

<?php
$arr_images = [
    ['poster' => 'EMPTY DREAMS.jpeg', 'song' => 'EMPTY DREAMS.mp3', 'name' => 'EMPTY DREAMS'],
    ['poster' => 'DARKANGELS.jpeg', 'song' => 'DARKANGELS.mp3', 'name' => 'DARKANGELS'],
    ['poster' => 'ABYSS.jpeg', 'song' => 'ABYSS.mp3', 'name' => 'ABYSS'],
    ['poster' => 'ETERNITY.jpeg', 'song' => 'ETERNITY.mp3', 'name' => 'ETERNITY'],
    ['poster' => 'REDMIST.jpeg', 'song' => 'REDMIST.mp3', 'name' => 'REDMIST'],
    ['poster' => 'SUPPRESSION.jpeg', 'song' => 'SUPPRESSION.mp3', 'name' => 'SUPPRESSION'],
];

Answer 1

[Stalker_RED]

Не нужна никакая индексация, просто при клике определяйте какой элемент был кликнут, находите трек внутри этого элемента.

<audio id="player"></audio>
<ul id="playlist">
  <li data-src="https://freesound.org/data/previews/447/447951_4716066-lq.mp3">tarck1</li>
  <li data-src="https://freesound.org/data/previews/447/447896_7020227-lq.mp3">tarck2</li>
  <li data-src="https://freesound.org/data/previews/447/447949_9080507-lq.mp3">tarck3</li>
</ul>
<script>
player.addEventListener("canplay", myAutoplay);
player.addEventListener("canplaythrough", myAutoplay);

function myAutoplay () {
  player.play();
}

playlist.addEventListener('click', function(evt) {
  const track = evt.target.closest('li[data-src]');
  if (track) {
    player.src = track.dataset.src;
  }
});

</script>

https://jsfiddle.net/Lp3c27ah/

Comments

[Caesar0117]

Большое спасибо вам), вы мне очень помогли!