如何为音乐播放器动态生成的下载按钮的onclick函数动态传参

存在的问题 #

• 循环遍历音频数据时未定义当前项变量，代码中使用的s未声明，无法读取对应音频的属性
• 动态设置onclick属性时参数写死为固定字符串'url'和'filename'，没有替换为每个音频对应的值
• 所有生成的li元素都使用了相同的idli-items，违反HTML id全局唯一的规范，可能引发其他DOM操作异常

修正后的代码实现 #

方式1：兼容原有setAttribute写法 #

直接修正参数拼接逻辑即可正常运行：

var data1 = [{
    href: "/media/the-deal.wav",
    name: "The Deal",
    song: "the-deal.wav"
}, {
    href: "/media/rise-of-don.mp3",
    name: "Rise of the Don",
    song: "rise-of-don.mp3"
}]

// 创建li元素
for (var i = 0; i < data1.length; i++) {
    // 获取当前遍历的音频项
    var current = data1[i];
    var t = document.createElement('li');
    // 用索引生成唯一id，也可直接移除id属性
    t.setAttribute("id",`li-item-${i}`);
    
    var ta = document.createElement('span');
    ta.classList.add("dwn","fa","fa-download");
    // 拼接动态参数，替换固定字符串
    ta.setAttribute("onclick",`downloadFile('${current.href}', '${current.name}')`);
    
    t.dataset.song = current.song;
    t.textContent = current.name;
    t.appendChild(ta);

    document.getElementById('playlist1').appendChild(t);
}

方式2：更推荐的addEventListener绑定 #

避免字符串拼接的转义风险，可维护性更高，只需把上述代码中ta.setAttribute行替换为以下内容即可：

// 建议同步把循环声明改为 let i = 0，避免闭包问题
ta.addEventListener('click', function() {
    downloadFile(current.href, current.name);
});

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