为多个 HTML 元素重用 JQuery

Question

更新的开发者在这里。

我在一个页面上有多个由同一个 JQuery 生成的元素。每个元素都加载了与其关联的适当内容，但任何函数（在本例中为点击不同的轨道）都从最后一组中提取内容。

到目前为止，我的研究使我相信这是一个竞争条件的案例。

这是一个代码笔 — 单击左侧两个播放器的任何歌曲标题，以查看如何从 #player-3 中提取图像、歌曲标题、艺术家姓名和 .mp3 数据。

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

& 这是 link 到 jquery 的 non-minified 版本：https://gist.github.com/hisasann/337283

非常感谢。我很高兴能学到一两件事。

Answer 1

好的，我发现了你的错误（即使当你要求别人调试你的代码时缩小版本不是最好的方法）。

错误在线：

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

a 包含提供的 Playlist，而 r 包含默认参数。我不确定为什么，但是如果您在此行之后记录 settings 变量，您会看到所有设置对象都具有相同的播放列表。

可能的修复：

交换 a 和 r:
```
this.settings = t.extend(!0, a, r)
```
来自 jQuery 文档：

The merge performed by $.extend() is not recursive by default; if a property of the first object is itself an object or array, it will be completely overwritten by a property with the same key in the second or subsequent object.
使用{}代替!0（即false）对于这一点，我仍在努力理解。我猜它与 recursive 合并有关，而且在控制台中它 returns 是一个函数而不是一个对象。我一发现就会编辑。

为多个 HTML 元素重用 JQuery

Reusing JQuery for Multiple HTML Elements

jquery

race-condition