Question

我正在尝试提取YouTube视频网址中包含的视频ID，然后将该ID存储在我可以参考的变量中，以创建iframe以嵌入YouTube视频。

以下是我的代码：

  $(".result").live("click", function () {
       var result_number = 0;
       youtubequery = "https://gdata.youtube.com/feeds/api/videos?category=Music&q=thesongstitle&v=2&alt=json&max-results=5";
       youtubeid = "";
       $.getJSON(youtubequery, function (vid_data) {
           $.each(vid_data.feed.entry, function (e, vid) {
               if (e == result_number) {
                   youtubeid = vid.id.$t.substring(27);
               }
           });
       });
       iframehtml = "<iframe height='300' width='400' src='http://www.youtube.com/embed/" + youtubeid + "?autoplay=1' frameborder='0' allowfullscreen></iframe>";
       $("#youtube_vid").html(iframehtml);
   });

当我点击“结果”类的div时，第一次将YouTube ID包含在变量iframehtml中存储的iframe html中。但是，当我第二次点击它时，一切都按预期工作。有谁知道是什么原因引起的？当我包含iframehtml变量的创建和将html放在#youtube_vid中的行时，我能够使它工作，但由于我的网站的功能，我无法以这种方式编码。

Answer 1

你的getJSON函数正在执行异步http get请求。因此，当您调用它时，它会在数据从请求返回之前返回。当您再次单击.result时，数据已返回。试着把

iframehtml = "<iframe height='300' width='400' src='http://www.youtube.com/embed/" + youtubeid + "?autoplay=1' frameborder='0' allowfullscreen></iframe>";
$("#youtube_vid").html(iframehtml);

在你的getJSON回调函数中，在html显示之前会有一段延迟，但是它会起作用。

Answer 2

您填写ID字段的$.each()在AJAX回调函数中异步运行，但您尝试立即使用该变量。

您还需要在回调函数期间添加iframe：

$(".result").live("click", function () {
    var result_number = 0;
    var youtubequery = "https://gdata.youtube.com/feeds/api/videos?category=Music&q=thesongstitle&v=2&alt=json&max-results=5";
    $.getJSON(youtubequery, function (vid_data) {
        var youtubeid;
        $.each(vid_data.feed.entry, function (e, vid) {
            if (e == result_number) {
                youtubeid = vid.id.$t.substring(27);
            }
        });
        iframehtml = "<iframe height='300' width='400' src='http://www.youtube.com/embed/" + youtubeid + "?autoplay=1' frameborder='0' allowfullscreen></iframe>";
        $("#youtube_vid").html(iframehtml);
    });
});

FWIW，您可能希望在标记中预先创建所需大小的iframe，然后只需设置.src属性即可开始加载。见http://jsfiddle.net/alnitak/z4rQg/

由于变量范围，jQuery首先点击不工作

2 个答案: