Повторное использование JQuery для нескольких элементов HTML

Question

newer здесь.

У меня есть на странице несколько элементов, сгенерированных тем же JQuery. Каждый элемент загружается с соответствующим содержимым, связанным с ним, но любые функции - клики на разных дорожках в этом случае - вытягивают содержимое из последнего набора.

Мое исследование до сих пор заставляет меня поверить, что это случай условий гонки.

Вот код - нажмите на любой из названий песен слева на двух игроков, чтобы увидеть, как изображения #, песни, названия артистов и .mp3 вытягиваются из # игрока-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

& вот ссылка на не-уменьшенную версию JQuery: https://gist.github.com/hisasann/337283

спасибо заранее. Я благодарен, чтобы узнать кое-что.

Answer 1

Хорошо, я выяснил вашу ошибку (даже если мини-версия не является лучшим способом, когда вы просите кого-то другого отладить ваш код).

Ошибка на линии:

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

a содержит комплект поставки Playlist, в то время как r содержит аргументы по умолчанию. Я не уверен, почему, но если ваш журнал содержит переменную settings после этой строки, вы увидите, что все объекты настроек имеют один и тот же список воспроизведения.

Возможные исправления:

1. своп a и r:

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

   Из док JQuery:

   Слияние осуществляется $ .extend() не является рекурсивным по по умолчанию; если свойство первого объекта само является объектом или массивом, оно будет полностью перезаписано свойством с тем же ключом во втором или последующем объекте.

2. использование {} вместо !0 (т.е. ложь) Для этого, я все еще пытаюсь понять. Это связано с объединением recursive, я думаю, и тем фактом, что в консоли он возвращает функцию вместо объекта. Как только я узнаю, отредактирует.