如何拥有一个 jQuery 插件的多个实例答案

【问题标题】：How to have multiple instances of a jQuery plugin如何拥有一个 jQuery 插件的多个实例
【发布时间】：2015-08-21 16:25:00
【问题描述】：

我正在尝试创建 SoundCloud 音乐播放器。它可以播放 SoundCloud 中的任何曲目，但此插件仅在页面中只有一个实例时才有效。因此，如果页面中有两个相同的插件，它将无法正常工作。

以下是页面中有两个玩家的示例：JSFiddle

var trackURL = $(".player").text();
$(".player").empty();
$(".player").append("<div class='playBTN'>Play</div>");
$(".player").append("<div class='title'></div>");

var trackId;
SC.get('/resolve', { url: trackURL }, function (track) {
    var trackId = track.id;
    //var trackTitle = track.title;
    $(".title").text(track.title);

    $(".playBTN").on('click tap', function () {
        //trackId = $(".DSPlayer").attr('id');
        stream(trackId);
    });

    // first do async action
    SC.stream("/tracks/" + trackId, {
        useHTML5Audio: true,
        preferFlash: false
    }, function (goz) {
        soundToPlay = goz;
        sound = soundToPlay;
        scTrack = sound;
        //updater = setInterval( updatePosition, 100);
    });
});
var is_playing = false,
    sound;

function stream(trackId) {
    scTrack = sound;
    if (sound) {
        if (is_playing) {
            sound.pause();
            is_playing = false;
            $(".playBTN").text("Play");
        } else {
            sound.play();
            is_playing = true;
            $(".playBTN").text("Pause");
        }
    } else {
        is_playing = true;
    }
}

如果您删除其中任何包含.player 类的 div 元素，则另一个元素将起作用。所以它只是不起作用，因为同一个插件有两个实例。

我该如何解决？在一页中有多个播放器实例？

【问题讨论】：

您可能需要遍历每个.player
@greener 好吧，我试着做每个循环，但每一轮它都会更新所有持有.player 的元素。所以所有元素都显示相同的数据。这就是为什么我认为循环不是修复它的正确方法。可以举个简单的例子吗？
就我而言，我已经将玩家分开但轨道还没有......也许你可以解决 soundcloud 位，因为我没有这方面的经验..jsfiddle.net/v8jhuba8/3

标签： javascript jquery soundcloud

【解决方案1】：

我已经发现了问题。这与您尝试同时加载多个轨道但没有分离代码来这样做的事实有关。

正如@Greener 提到的，您需要分别迭代 .player 实例并为每个实例执行 SC.get()。

这是我看到的导致问题的原因：

var trackURL = $(".player").text();

^上面的代码返回一个字符串，其中包含您要背靠背使用的两个 URL，不带空格。由于这段代码，这会产生一个问题：

SC.get('/resolve', { url: trackURL }, function (track) {...

这是一个试图从 SoundCloud 加载相关歌曲的函数。您正在向它传递一个变量“trackURL”，以便它尝试加载特定的 URL。该函数得到一个看起来像“URLURL”的字符串，它需要的只是“URL”。

您可以做的是遍历所有存在的不同“.player”元素，然后以这种方式调用声音。我稍微修改了您的脚本以使其使用 for 循环工作。我不得不将“empty()”函数移到 for 循环中以使其正常工作。引用 JQuery 元素数组时必须使用 .eq(index)。

像这样：

var trackURL
var trackId;

for(index = 0; index < $(".player").length; index++){
    trackURL = $(".player").eq(index).text();
    //alert(trackURL);
    $(".player").eq(index).empty();
    $(".player").eq(index).append("<div class='playBTN'>Play</div>");
    $(".player").eq(index).append("<div class='title'></div>");
    SC.get('/resolve', { url: trackURL }, function (track) {
    var trackId = track.id;
    alert(track.id);
    //var trackTitle = track.title;
    $(".title").eq(index).text(track.title);

    $(".playBTN").eq(index).on('click tap', function () {
        //trackId = $(".DSPlayer").attr('id');
        stream(trackId);
    });

    // first do async action
    SC.stream("/tracks/" + trackId, {
        useHTML5Audio: true,
        preferFlash: false
    }, function (goz) {
        soundToPlay = goz;
        sound = soundToPlay;
        scTrack = sound;
        //updater = setInterval( updatePosition, 100);
    });
});
}

这不是一个完全完成的代码，但它会启动两首单独的歌曲“准备好”进行流式传输。我使用注释掉的警报检查了 SoundCloud 给我们的 ID（这表明它现在已加载）。您正在使用流媒体功能以及播放和暂停做一些有趣的事情。这应该让您对正在发生的事情有一个很好的了解，并且您可以通过这种方式实现您的自定义代码。

【讨论】：