前端音乐播放交互Bug：点击播放按钮后暂停按钮消失

核心问题 #

暂停按钮点击后不显示的原因有两点：

1. 未添加激活状态下显示暂停按钮的CSS规则，默认暂停按钮是display: none，但没有在.track-card.active时将其设为可见。
2. CSS中.track-card.active{display: block;}会覆盖原本的d-flex布局类，破坏卡片的弹性布局结构，导致元素排版异常。

修复步骤 #

1. 修正CSS规则 #

修改CSS代码，移除错误的布局覆盖规则，并添加暂停按钮的显示逻辑：

.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 .fa-pause{
    display: block;
} 

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

2. 优化JS状态管理（推荐） #

当前代码未处理切换歌曲时的状态重置，会导致多个歌曲卡片同时显示激活状态，补充逻辑修复：

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() {
            // 移除所有卡片的激活状态
            document.querySelectorAll('.track-card').forEach(card => {
                card.classList.remove('active');
            });
            
            let selectedTrack = btn.getAttribute('data-track');
            trackcurr = selectedTrack;
            changeTrackDetails();

            if (playing) {
                playing=false;
                play();
            }
            // 给当前卡片添加激活状态
            btn.parentNode.classList.add('active');
        })
     })
}

3. 补充暂停按钮交互（可选） #

如果需要点击暂停按钮实现暂停功能，添加对应的事件绑定：

// 在populateTracklist函数末尾添加
let btnsPause = document.querySelectorAll('.fa-pause');
btnsPause.forEach(btn=> {
    btn.addEventListener('click', function() {
        // 执行暂停逻辑（根据你的播放控制函数调整）
        playing = false;
        // 调用你的暂停函数，例如 pause()
        // 移除当前卡片的激活状态
        btn.parentNode.classList.remove('active');
    })
})

内容的提问来源于stack exchange，提问作者Aurora