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/