单击“播放”按钮时，“暂停”按钮消失。

Question

我有一个边栏与一些歌曲和每首歌曲有标题和艺术家的名字和一个播放按钮。当我点击播放按钮时，歌曲开始播放(到目前为止一切都还好)，但是暂停按钮应该会出现，而当我点击播放按钮时，就会显示暂停按钮。

​

function populateTracklist() {
    let allList = document.querySelector('#tracklist');

    tracks.forEach((track, index)=> {
        let card = document.createElement('div');
        card.classList.add('col-12');
        card.innerHTML =
        `
        <div class="d-flex align-items-center justify-content-between px-4 py-3 border-main track-card">
            <img class="img_size" src="${track.cover}" alt="">
            <div class="text-white">
                <h5 class="mb-0 tx-gradient">${track.artist}</h5>
                <p class="mb-0">${track.title}</p>
            </div>
            <i data-track="${index}" class="fas fa-play fs-3 tx-gradient pointer playlist-play"></i>
            <i class="fas fa-pause fs-3 tx-gradient pointer"></i> 
        </div>
        `
        allList.appendChild(card);
    })
    let btnsPlay = document.querySelectorAll('.playlist-play');
     btnsPlay.forEach(btn=> {
        btn.addEventListener('click', function() {
            let selectedTrack = btn.getAttribute('data-track');
            trackcurr = selectedTrack;
            changeTrackDetails();

            if (playing) {
                playing=false;
                play();
            }
            //console.log(trackcurr);
            //console.log(btn.parentNode);
            btn.parentNode.classList.add('active');
        })
     })
}

.border-main{
    border-bottom: solid 4px var(--main);
}

.track-card.active{
    background: linear-gradient(var(--black) 90%, var(--sec));
}

.track-card .fa-pause{
    display: none;
}  

.track-card.active .fa-play{
    display: none;
}  

.track-card.active{
    display: block;
} 

.border-main.active{
    border-bottom: solid 4px var(--sec);
}

<div id="sidebarmusic" class="open">
        <div class="row" id="tracklist">
            <div class="col-12">                
            </div>           
        </div>
    </div>

​

Answer 1

您可以添加id属性到您的播放和暂停按钮。

id='play-${index}'
id='pause-${index}'

//so that on your event listener
//you can simply get the element via id.

let pause = document.querySelector(`#pause-${selectedTrack}`)

//then remove the class

pause.classList.remove("fa-pause")

//or toggle 

pause.classList.toggle("fa-pause")

对不起打错了..。我在手机上。