Réutilisation de JQuery pour plusieurs éléments HTML

Question

nouveau dev ici.

J'ai sur une page plusieurs éléments générés par le même JQuery. Chaque élément est chargé avec le contenu approprié, mais toutes les fonctions - clics sur différentes pistes dans ce cas - extraient le contenu du dernier ensemble.

Mes recherches jusqu'à présent me portent à croire qu'il s'agit d'un cas de conditions de course.

Voici un codepen-clic sur n'importe quel titre de chanson sur les deux lecteurs de gauche pour voir comment les images, les titres de chanson, les noms d'artistes et les données .mp3 sont tirés du # player-3.

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

& est ici un lien vers une version non minified du jquery: https://gist.github.com/hisasann/337283

Merci beaucoup à l'avance. Je suis reconnaissant d'apprendre une chose ou deux.

Answer 1

Ok, j'ai découvert votre erreur (même si une version minifiée n'est pas la meilleure solution lorsque vous demandez à quelqu'un d'autre de déboguer votre code).

L'erreur est sur la ligne:

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

a contient le Playlist fourni, tandis que r contient les arguments par défaut. Je ne sais pas pourquoi, mais si vous consignez la variable settings après cette ligne, vous voyez que tous les objets de paramètres ont la même liste de lecture.

solutions possibles:

1. échange a et r:

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

   De la doc jQuery:

   La fusion réalisée par .extend $() n'est pas récursive par défaut; Si une propriété du premier objet est elle-même un objet ou un tableau, elle sera complètement écrasée par une propriété avec la même clé dans le second objet ou dans le suivant.

2. utilisation {} au lieu de !0 (à savoir faux) Pour celui-ci, j'essaie de comprendre encore. Cela a à voir avec la fusion recursive je suppose, et le fait que dans la console il retourne une fonction au lieu d'un objet. Éditera dès que je l'aurai découvert.