jQuery YouTube数组从播放列表范围问题

Question

我正试图根据播放列表ID提取一个YouTube视频列表，然后将其传递给YouTube旋转木马脚本。我有一些范围的问题，虽然我不知道如何解决它。

基本上，我声明数组yt_videos，然后用$.each循环中各个视频的ID填充它。当我试图在外部函数中访问这个数组时，它是未定义的。我确信解决方案相当简单，只是我自己无法实现。

Fiddle：http://jsfiddle.net/wardrobe/Nz87f/2/

这是JS：

var playListURL = 'http://gdata.youtube.com/feeds/api/playlists/PLDD79FC8870945AA5?v=2&alt=json&callback=?';
var videoURL= 'http://www.youtube.com/watch?v=';
var yt_videos = [];
$.getJSON(playListURL, function(data) {
var list_data="";
$.each(data.feed.entry, function(i, item) {
var feedTitle = item.title.$t;
var feedURL = item.link[1].href;
var fragments = feedURL.split("/");
var videoID = fragments[fragments.length - 2];
yt_videos.push(videoID);
});
});

/*Video height and width*/
var yt_height = 346;
var yt_width = 615;
/*-----DO NOT EDIT BELOW THIS-----*/
jQuery(document).ready(function () {
var yt_html = "";
for (var num=0, len=yt_videos.length; num<len; ++num){
yt_html = yt_html + "<li><a onclick='change_embeded("" + yt_videos[num] + "")'><img src='http://img.youtube.com/vi/"+yt_videos[num]+"/2.jpg' class='myimage' style='max-height:75px;' /></a></li>";
}
jQuery('#yt_container').html('<div id="yt_videosurround"><div id="yt_embededvideo"><object width="'+ yt_width +'" height="'+ yt_height +'"><param name="movie" value="http://www.youtube.com/v/'+ yt_videos[0] +'?version=3&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/'+ yt_videos[0] +'?version=3&amp;hl=en_US" type="application/x-shockwave-flash" width="'+ yt_width +'" height="'+ yt_height +'" allowscriptaccess="always" allowfullscreen="true" wmode="transparent"></embed></object></div></div><ul id="mycarousel" class="jcarousel-skin-tango">'+yt_html+'</ul>');
var embeded_cssObj = {
'width' : yt_width,
'height' : yt_height
} 
jQuery('#yt_embededvideo').css(embeded_cssObj);
jQuery('#yt_videosurround').css(embeded_cssObj);
jQuery('#mycarousel').jcarousel({
wrap: 'circular'
});
});

function change_embeded(video_id){
jQuery('#yt_embededvideo').html('<object width="'+ yt_width +'" height="'+ yt_height +'"><param name="movie" value="http://www.youtube.com/v/'+ video_id +'?version=3&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/'+ video_id +'?version=3&amp;hl=en_US" type="application/x-shockwave-flash" width="'+ yt_width +'" height="'+ yt_height +'" allowscriptaccess="always" allowfullscreen="true" wmode="transparent"></embed></object>');
}

Answer 1

访问可能尚未从服务器到达的数据

一些重组-试试这个-http://jsfiddle.net/QQ34V/

jQuery(document).ready(function () {
var playListURL = 'http://gdata.youtube.com/feeds/api/playlists/PLDD79FC8870945AA5?v=2&alt=json&callback=?',
videoURL= 'http://www.youtube.com/watch?v=',
yt_videos = [],
yt_height = 346,
yt_width = 615,
yt_html = "";
$.getJSON(playListURL, function(data) {
var list_data="";
$.each(data.feed.entry, function(i, item) {
var feedTitle = item.title.$t;
var feedURL = item.link[1].href;
var fragments = feedURL.split("/");
var videoID = fragments[fragments.length - 2];
yt_videos.push(videoID);
});
for (var num=0, len=yt_videos.length; num<len; ++num){
yt_html = yt_html + "<li><a onclick='change_embeded("" + yt_videos[num] + "")'><img src='http://img.youtube.com/vi/"+yt_videos[num]+"/2.jpg' class='myimage' style='max-height:75px;' /></a></li>";
}
jQuery('#yt_container').html('<div id="yt_videosurround"><div id="yt_embededvideo"><object width="'+ yt_width +'" height="'+ yt_height +'"><param name="movie" value="http://www.youtube.com/v/'+ yt_videos[0] +'?version=3&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/'+ yt_videos[0] +'?version=3&amp;hl=en_US" type="application/x-shockwave-flash" width="'+ yt_width +'" height="'+ yt_height +'" allowscriptaccess="always" allowfullscreen="true" wmode="transparent"></embed></object></div></div><ul id="mycarousel" class="jcarousel-skin-tango">'+yt_html+'</ul>');
var embeded_cssObj = {
'width' : yt_width,
'height' : yt_height
} 
jQuery('#yt_embededvideo').css(embeded_cssObj);
jQuery('#yt_videosurround').css(embeded_cssObj);
jQuery('#mycarousel').jcarousel({
wrap: 'circular'
});
/* for correct placement of this function you will need to provide more info on where/ how it is called */
function change_embeded(video_id){
jQuery('#yt_embededvideo').html('<object width="'+ yt_width +'" height="'+ yt_height +'"><param name="movie" value="http://www.youtube.com/v/'+ video_id +'?version=3&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/'+ video_id +'?version=3&amp;hl=en_US" type="application/x-shockwave-flash" width="'+ yt_width +'" height="'+ yt_height +'" allowscriptaccess="always" allowfullscreen="true" wmode="transparent"></embed></object>');
}
});
});

*我还没有完全检查过这段代码，但请注意，对变量的访问现在在.ajax()回调函数中，确保在"获取"数据时它们可用。