Soundcloud widget & for loop

Soundcloud widget & for loop

本文关键字：for loop amp widget Soundcloud      更新时间：2023-09-26

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

$(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 技能，它不起作用。

我喜欢重构代码的热情，以及使用更高级别的模式、循环而不是像你那样的硬编码的愿望。话虽如此，"中间空间"问题是迭代列表时更难解决的问题之一。

您必须决定几件事：

  • 你有一个任务要执行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();
});

假设HTML看起来像这样：

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

您可以获取div内所有iframe的列表，类为"playAll"（无论深度如何），并迭代：

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

http://api.jquery.com/descendant-selector/

相关文章：