複数のHTML要素にJQueryを再利用する

Question

ここに新しい開発者があります。

同じJQueryによって生成された複数の要素がページにあります。各要素には適切なコンテンツが関連付けられてロードされますが、この場合は異なるトラックをクリックする関数によって、最後のセットからコンテンツがプルされます。

これまでの研究から、私はこれが競争条件のケースであると信じています。

左側の2人のプレーヤーの曲名をクリックすると、＃player-3から画像、曲名、アーティスト名、および.mp3データがどのように取得されたかを確認できます。事前にhttps://gist.github.com/hisasann/337283

本当にありがとうございました：

$("#player-2").jAudio({ 
    playlist: [{ 
      file: "http://spindrop.io/audio/forgetme.mp3", 
      thumb: "http://spindrop.io/images/ar.jpg", 
      trackName: "Hungry", 
      trackArtist: "American Royalty", 
      trackAlbum: "Prismatic EP", 
    }, { 
      file: "http://spindrop.io/audio/mistakes.mp3", 
      thumb: "http://spindrop.io/images/ar.jpg", 
      trackName: "Red", 
      trackArtist: "American Royalty", 
      trackAlbum: "Prismatic EP", 
    }, { 
      file: "http://spindrop.io/audio/riverbed.mp3", 
      thumb: "http://spindrop.io/images/ar.jpg", 
      trackName: "Lifeline", 
      trackArtist: "American Royalty", 
      trackAlbum: "Prismatic EP", 
    }] 
}); 
$("#player-3").jAudio({ 
    playlist: [{ 
      file: "../audio/staticheart.mp3", 
      thumb: "../images/geo.jpg", 
      trackName: "Family", 
      trackArtist: "Geographer", 
      trackAlbum: "Animal Shapes", 
    }, { 
      file: "../audio/taillights.mp3", 
      thumb: "../images/geo.jpg", 
      trackName: "Looping", 
      trackArtist: "Geographer", 
      trackAlbum: "Animal Shapes", 
    }, { 
      file: "../audio/theline.mp3", 
      thumb: "../images/geo.jpg", 
      trackName: "Sonic", 
      trackArtist: "Geographer", 
      trackAlbum: "Animal Shapes", 
    }] 
}); 

http://codepen.io/kylebillings/pen/BKmZJx

&

は、ここではjqueryのの非縮小さバージョンへのリンクです。私は何かを学ぶことに感謝しています。

Answer 1

あなたがエラーを見つけました（コードをデバッグするために他の人に質問したときに、ミニバージョンが最適な方法ではない場合でも）。

エラーがライン上にある：rは、デフォルト引数が含まれていながら、

this.settings = t.extend(!0, r, a) 

aは、供給Playlistが含まれています。理由はわかりませんが、この行の後にsettingsという変数が記録されていれば、すべての設定オブジェクトに同じプレイリストがあることがわかります。

可能な修正：

1. スワップaとr：

   this.settings = t.extend(!0, a, r) 
   

   jQueryのドキュメントから：

   $ .extend（）によって実行されるマージによって再帰的ではありませんデフォルト;最初のオブジェクトのプロパティ自体がオブジェクトまたは配列である場合、2番目以降のオブジェクトで同じキーを持つプロパティによって完全に上書きされます。

2. 使用{}の代わりに、!0（すなわち偽） この1のために、私はまだ理解しようとしています。それは、recursiveのマージと、コンソールでオブジェクトの代わりに関数を返すという事実と関係しています。見つけたら直ちに編集します。