Question

我想我错过了一些愚蠢的话。我正在创建一堆带有音频源标题的按钮。当用户单击该按钮时，源应该在音频播放器中更新。

不幸的是，音频源似乎总是最后一项。换句话说，按钮与正确的源不对应......它们都只对应于相同的源。

这是我拥有的代码：

{{1}}

或者，作为小提琴：https://jsfiddle.net/jmg157/1cL9p1qa/

在小提琴中，您会注意到当您单击按钮时，控制台中的消息始终显示相同的值。

非常感谢任何帮助。

Answer 1

请试试这个：

episodes = {0: {title: 'Audio 1', url: 'audio1.mp3'}, 1: {title: 'Audio 2', url: 'audio2.mp3'}, 2: {title: 'Audio 3', url: 'audio3.mp3'}};

for (var i = 0; i < Object.keys(episodes).length; i++) {
        var title = episodes[i].title;
    var url = episodes[i].url;
    var button = document.createElement('button');
    button.innerHTML = title;
    button.audioUrl = url;
    button.addEventListener("click", function(e) {
        console.log(e.target.audioUrl);
        $('#player').attr('src', e.target.audioUrl)[0];
    });
    document.body.appendChild(button);
}

您必须将网址附加到该元素，因为变量url将保留最后一个audio.mp3的值。

演示： https://jsfiddle.net/y0mkw5gr/

无法在JavaScript中以编程方式更改音频源

1 个答案: