<div class="track d-flex align-items-center">
<span class="play">
<i class="fa fa-play" aria-hidden="true"></i>
<img class="pause" src="/images/pause-icon.svg" alt="">
</span>
<a href="/inner/music" class="d-flex flex-column track_name--wrap">
<span class="track_name">Oh My Love</span>
<span class="track_singer">The Score</span>
</a>
<div class="track_top ml-auto">1</div>
<div class="track_download">
<a href="#">
svg class="download-icon">
<use xlink:href="/images/sprite.svg#download"></use>
</svg>
</a>
</div>
</div>
<div class="track d-flex align-items-center">
<span class="play">
<i class="fa fa-play" aria-hidden="true"></i>
<img class="pause" src="/images/pause-icon.svg" alt="">
</span>
<a href="/inner/music" class="d-flex flex-column track_name--wrap">
<span class="track_name">Oh My Love</span>
<span class="track_singer">The Score</span>
</a>
<div class="track_top ml-auto">1</div>
<div class="track_download">
<a href="#">
svg class="download-icon">
<use xlink:href="/images/sprite.svg#download"></use>
</svg>
</a>
</div>
</div>
let play = document.querySelectorAll('.track .play');
let playerContainer = document.querySelector('.audio-player-container');
Array.prototype.forEach.call(play, function (item) {
item.addEventListener('click', function () {
playerContainer.classList.add('show');
item.classList.toggle('clicked');
if (item.classList.contains('clicked')) {
audioPlayer.api("play");
} else {
audioPlayer.api("pause");
}
});
});
Есть массив из кнопок play. При клике на play ему добавляется класс clicked, при повторном клике класс убирается. Нужно сделать так чтобы при клике на другую кнопку плей, класс убирался у предыдущей нажатой кнопки и добавлялся текущей нажатой кнопке. Но при этом чтобы работал и toggle класса если нажать на эту кнопку еще раз.