对多个HTML元素重用JQuery

Question

这里有新的开发。

我在页面上有由同一个JQuery生成的多个元素。每个元素都加载与其关联的适当内容，但任何函数-单击不同的轨道-在本例中是- pull内容的最后一组。

到目前为止，我的研究让我相信这是种族状况的一个例子。

这是一个代码依赖- click的任何歌曲标题在左边的两个播放器，看看图像，歌曲标题，艺术家的名字，和.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合并有关，而且在控制台中它返回一个函数而不是一个对象。我一发现就会编辑。