Soundcloud小部件＆for循环

Question

我使用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的技能，这是行不通的。

Answer 1

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

你有一对夫妇的事情决定：

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

Answer 2

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

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

也就得到带班“playAll”（无论是深度）在div内的所有I帧的列表，并遍历：

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

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