javascript - 来自播放列表范围问题的 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() 中。回调函数，确保在您“获取”数据时它们可用。