Question

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

$(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();
    });
});

它有效，但我想要做的是＆＃34;对于＆＃34;循环，但由于缺乏js / jquery技能，它不起作用。

Answer 1

假设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]
}

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

Answer 2

我喜欢重构代码的热情以及使用更高级别模式的循环，而不是像你一样使用硬编码。那就是说＃＆＃34;中间空间＆＃34;问题是迭代列表时要解决的难题之一。

你必须决定几件事：

你有一个任务要执行n-1次，所以你必须决定你是跳过第一个元素还是最后一个元素。
您将在每次迭代中执行什么任务。
循环结束后你会做什么。
如果您使用功能性解决方案或经典＆＃34;用于＆＃34;循环。

让我们从任务开始。我们将从您的示例中获取任务并将其放入函数中。

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

使用此函数，我们可以使用循环中的索引来传递当前和下一个元素。唯一的例外是当我们在最后一个元素上没有＆＃34; next＆＃34;时，这就是我们要跳过的那个。我们将使用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();
});

Soundcloud小部件＆amp; for循环

2 个答案: