JavaScriptでオーディオソースをプログラムで変更するときに問題が発生する

Question

私は何かばかげていると思います。私は、オーディオソースのタイトルを持つたくさんのボタンを作成しています。ユーザーがボタンをクリックすると、オーディオプレーヤーでソースが更新されます。

残念ながら、オーディオソースは常に最後のアイテムのようです。言い換えれば、ボタンは正しいソースに対応していません...それらはすべて同じソースに対応しています。

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.addEventListener("click", function() { 
     $('#player').attr('src', url)[0]; 
     $('#player')[0].load(); 
    }); 
    document.body.appendChild(button); 
} 

あるいは、フィドルとして：フィドルでhttps://jsfiddle.net/jmg157/1cL9p1qa/

、あなたがボタンをクリックするとことに気づくでしょう、でメッセージここで

は、私はそれを持っているようなコードですコンソールは常に同じ値を表示します。

ご協力いただければ幸いです。

Answer 1

これを試してください：変数urlがaudio.mp3ある最後の値を保持しますので、

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を添付する必要があります。

デモ：https://jsfiddle.net/y0mkw5gr/