Wiederverwenden von JQuery für mehrere HTML-Elemente

Question

neuere Dev hier.

Ich habe auf einer Seite mehrere Elemente von der gleichen JQuery generiert. Jedes Element wird mit dem richtigen Inhalt geladen, aber alle Funktionen - in diesem Fall klickt man auf verschiedene Spuren - ziehen Inhalte aus dem letzten Satz.

Meine bisherigen Untersuchungen lassen mich glauben, dass dies ein Fall von Race Conditions ist.

Hier ist ein Codepen - klicken Sie auf einen der Titel auf der linken Seite zwei Spieler, um zu sehen, wie Bilder, Songtitel, Künstlernamen und MP3-Daten von # Player-3 gezogen werden.

$("#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

& hier ist ein Link zu einer nicht-minimierte Version des jquery: https://gist.github.com/hisasann/337283

so vielen Dank im Voraus. Ich bin dankbar, dass ich etwas gelernt habe.

Answer 1

Ok, ich habe Ihren Fehler gefunden (auch wenn eine verkleinerte Version nicht der beste Weg ist, wenn Sie jemand anderen bitten, Ihren Code zu debuggen).

Der Fehler ist auf der Linie:

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

a enthält die zugeführte Playlist, während r die Standardargumente enthält. Ich bin mir nicht sicher, warum, aber wenn Sie die settings Variable nach dieser Zeile loggen, sehen Sie, dass alle Einstellungsobjekte dieselbe Wiedergabeliste haben.

Mögliche Korrekturen:

1. Swap a und r:

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

   Aus dem jQuery doc:

   Die Zusammenführung durchgeführt von $ .extend() nicht rekursiv ist durch Standard; Wenn eine Eigenschaft des ersten Objekts selbst ein Objekt oder Array ist, wird sie vollständig durch eine Eigenschaft mit demselben Schlüssel im zweiten oder nachfolgenden Objekt überschrieben.

2. Verwendung {} statt !0 (das heißt false) Für diesen einen, ich versuche immer noch zu verstehen. Es hat mit der recursive Zusammenführung zu tun, denke ich, und die Tatsache, dass es in der Konsole eine Funktion anstelle eines Objekts zurückgibt. Wird bearbeiten, sobald ich es herausgefunden habe.