Javascript Soundcloud小部件&for循环

我使用soundcloud小部件创建了音乐博客。我触发了一个按钮Play all，所以当你点击它时，它会播放所有的小部件

$(function(){
    var playAll = $('.playAll');

    var widget0 = SC.Widget(playAll.find('iframe')[0]);
    var widget1 = SC.Widget(playAll.find('iframe')[1]);
    var widget2 = SC.Widget(playAll.find('iframe')[2]);

    widget0.bind(SC.Widget.Events.FINISH,function() {
       widget1.play();
       widget0.unbind(SC.Widget.Events.FINISH);
    });

    widget1.bind(SC.Widget.Events.FINISH,function() {
        widget2.play();
        widget1.unbind(SC.Widget.Events.FINISH);
    });


    $("#playSound").click(function() {
        widget0.toggle();
    });
});

---

它是可行的，但我尝试做的是for循环，但由于缺乏js/jquery技能，它不起作用。

假设HTML看起来有点像这样：

<div class="playAll">
    <div>
        <iframe></iframe>
        <iframe></iframe>
        <iframe></iframe>
    </div>    
</div>

使用playAll类获得div中所有iframe的列表，无论深度如何，并迭代：

var iframes = $(".playAll iframe");
for (i = 0; i < iframes.length; i++) {   
        // do something with iframes[i]
}

---

我喜欢重构代码的热情，喜欢使用更高层次的模式，循环，而不是像你那样硬编码。也就是说，中间空间问题是迭代列表时最难解决的问题之一

你必须决定以下几件事：

您有一个任务要执行n-1次，因此您必须决定是跳过第一个元素还是最后一个元素。 在每次迭代中，您将执行什么任务。 循环完成后您将执行的操作。 如果您要使用功能解决方案或经典for循环。 让我们从任务开始。我们将从您的示例中获取任务，并将其放入函数中

function connectFrames(now, next) {
  now.bind(SC.Widget.Events.FINISH, function() {
    next.play();
    now.unbind(SC.Widget.Events.FINISH);
  });
}

通过这个函数，我们可以使用循环中的索引来传入当前和下一个元素。唯一的例外是当我们在最后一个元素上时，没有下一个元素，所以这就是我们将跳过的元素。我们将分别使用jQuery来实现一个现代的/功能性的解决方案

//One query to select all iframes inside .playAll
var playAll = $('.playAll iframe');

//The jQuery "loop" http://api.jquery.com/each/
playAll.each(function(index) {
  var now = playAll[index],
      next = playAll[index + 1];

  //If their is no next... skip.
  if(!next) return;

  //Use the frames we have in our function
  connectFrames(now, next);
});

我们要做的最后一件事是在我们的最后一步写下，那就是开始播放内容，我们就完成了。以下是完整的代码：

function connectFrames(now, next) {
  now.bind(SC.Widget.Events.FINISH, function() {
    next.play();
    now.unbind(SC.Widget.Events.FINISH);
  });
}

//One query to select all iframes inside .playAll
var playAll = $('.playAll iframe');

//The jQuery "loop" http://api.jquery.com/each/
playAll.each(function(index) {
  var now = playAll[index],
      next = playAll[index + 1];

  //If their is no next... skip.
  if(!next) return;

  //Use the frames we have in our function
  connectFrames(now, next);
});

//initiator from example
$("#playSound").click(function() {
    playAll[0].toggle();
});

---

谢谢zxzak的回答，我创建了for循环，但现在的问题是，当它迭代时，它跳过第二个轨道，一直跳到第三个轨道。所以我可能需要添加if语句。数组中元素的顺序应该与DOM树中的顺序相同。您是否需要if语句，取决于您的具体情况。哇，非常感谢，这就像是新年快乐时的礼物。我有一件奇怪的事情，playAll[0]。切换；没有发射第一轨道。