Делаю список песен, есть кнопка "play" и "pause" на каждой песне. При клике на "play" самой кнопке дается класс "hidden", кнопке "pause" дается класс visible и песне (родительскому блоку) задается класс "active".
Мне нужно при переключении песен удалять класс "active" с той песни, которая играла до этого. (это не могу сделать) И добавлять класс на ту, что играет сейчас (это смог сделать)
<div class="radioSong__item song">
<div class="song__play"></div>
<div class="song__pause"></div>
</div>
<div class="radioSong__item song">
<div class="song__play"></div>
<div class="song__pause"></div>
</div>
<div class="radioSong__item song">
<div class="song__play"></div>
<div class="song__pause"></div>
</div>
<div class="radioSong__item song">
<div class="song__play"></div>
<div class="song__pause"></div>
</div>
вот код:
let songPlay = document.querySelectorAll('.song__play');
let songPause = document.querySelectorAll('.song__pause');
let song = document.querySelectorAll('.song');
if(songPlay) {
songPlay.forEach(item => {
item.addEventListener('click', (e) => {
item.nextElementSibling.classList.add('visible');
item.nextElementSibling.classList.remove('hidden');
item.classList.add('hidden');
item.classList.remove('visible');
item.closest('.song').classList.add('active');
})
})
}
if(songPause){
songPause.forEach(item => {
item.addEventListener('click', () => {
item.previousElementSibling.classList.add('visible');
item.previousElementSibling.classList.remove('hidden');
item.classList.add('hidden');
item.classList.remove('visible');
item.closest('.song').classList.remove('active');
})
})
}
song.forEach(item => {
item.addEventListener('mouseout', () => {
item.querySelector('.song__play').classList.remove('visible')
})
})
