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

Question

Новый разработчик здесь.

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

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

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

& вот ссылка на не минимизированную версию 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 Я думаю, слияние и тот факт, что в консоли он возвращает функцию вместо объекта. Буду редактировать, как только я узнаю.