多元素绑定同一click事件监听器 点击playlist实例加载对应资源

• HTML 存在ID重复问题：ID属性在整个页面中必须唯一，你给多个<a>标签设置相同的id="playlist"、id="options"属于语法错误，会导致选择器逻辑异常。
• JS变量未定义：loadPlaylist 函数中使用的playlist变量没有赋值来源，无法获取点击的播放列表名称。
• 元素选择器错误：你主容器内的时长、歌曲数、大小对应标签用的是class属性，你用querySelector('#playlist-duration')这类ID选择器是选不到对应元素的。

修正后的代码 #

1. 播放列表HTML #

<div class="playlists">
    <h3>Playlists</h3>
    <ul>
        <li class="playlist">
            <a class="playlist-item" href="#hyperpop">hyperpop</a><a class="options">...</a>
        </li>
        <li class="playlist">
            <a class="playlist-item" href="#uk-rap">uk-rap</a><a class="options">...</a>
        </li>
        <li class="playlist">
            <a class="playlist-item" href="#misc">misc</a><a class="options">...</a>
        </li>
    </ul>
</div>

2. 修正后的JS代码 #

// 修正选择器，匹配class属性
const playlistCover = document.querySelector('#playlist-cover');
const playlistName = document.querySelector('#playlist-name');
const playlistDuration = document.querySelector('.playlist-duration');
const playlistLength = document.querySelector('.playlist-songs');
const playlistSize = document.querySelector('.playlist-size');
let currentCSVPath = ''; // 全局存储当前CSV路径，方便后续调用

// 绑定点击事件，把点击的播放列表名称传给加载函数
document.querySelectorAll('.playlist .playlist-item').forEach(item => {
    item.addEventListener('click', event => {
        // 不需要锚点跳转可以加这行阻止默认行为
        event.preventDefault();
        const playlistKey = item.innerText.trim();
        loadPlaylist(playlistKey);
    })
})

function loadPlaylist(playlistKey) {
    // 基础信息渲染
    playlistName.innerText = playlistKey;
    playlistCover.src = `static/playlists/${playlistKey}/cover.png`;
    currentCSVPath = `static/playlists/${playlistKey}/${playlistKey}.csv`;
    // 后续CSV加载逻辑直接在这里调用
    loadAndParseCSV(currentCSVPath);
}

• 实现CSV加载解析逻辑：可以用原生fetch请求CSV文件后按逗号、换行符拆分字段，也可以用成熟的第三方CSV解析库处理格式转义等复杂场景，解析后即可拿到每首歌的名称、时长、文件大小等信息。
• 计算汇总数据：把解析出来的所有歌曲的时长累加格式化得到总时长，统计歌曲总数，累加文件大小得到总占用空间，把这些数据赋值给页面对应的DOM元素。
• 增加异常处理逻辑：比如封面图加载失败时替换为默认封面，CSV文件请求失败时给用户提示加载失败，避免页面无响应。
• 可选优化：页面初始化时默认加载第一个播放列表的内容，或者根据URL锚点自动加载对应播放列表。

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