jquery - 使用 Youtube Google API 和 jQuery

Question

我正在迭代由数据库生成的每个 li，它会生成一个指向我想要链接的视频的 YouTube 链接，所以基本上我有这个:

<ul id="mediaList">
    <li>
        <p>http://www.youtube.com/watch?v=TOm-myVLmKU</p>
    </li>
    <li>
        <p>http://www.youtube.com/watch?v=odNde8wQ5uA</p>
    </li>
</ul>

我需要迭代每个 li 项目，获取 youtube 链接，获取视频 id，然后检索 JSON 数据，最终目标是将该视频的缩略图的图像标签添加到列表项中媒体列表

为了实现这一点，我有这个jquery代码(请注意使用没有冲突，所以$变成$j):

$j(document).ready(function () {

$j("#mediaList li").each(function (){

    var u = $j(this).find("p").text();
    var reqStart = "http://gdata.youtube.com/feeds/api/videos/";
    var reqSettings = "?v=2&alt=json-in-script&callback=?";
    var vid = grabytvid(u);

    var request = reqStart + vid + reqSettings;

    $j.getJSON(request, function(data) {
        var y = (data.entry["media$group"]["media$thumbnail"][0].url);

    });

    $j(this).append('<img src="' + y + '" alt="" />');

    });
});

我在哪里使用 Youtube API Feed 调用:

http://gdata.youtube.com/feeds/api/videos/[Video_ID_Here]?v=2

仅供引用，grabytvid 是一个仅分割并获取视频 id 的函数:

function grabytvid(ystring)
{
    var v = ystring.split("=").pop();
    return v;
}

我这里有什么地方出错了吗？

Answer 1

很简单。您y未在 $j(this).append('<img src="' + y + '" alt="" />'); 中定义如您设置y仅在 getJSON 内功能

我会这样做

$("#mediaList li").each(function() {

    var self = this, u = $(this).find("p").text();
    var reqStart = "http://gdata.youtube.com/feeds/api/videos/";
    var reqSettings = "?v=2&alt=json-in-script&callback=?";
    var vid = grabytvid(u);

    var request = reqStart + vid + reqSettings;

    $.getJSON(request, function(data) {
        var y = (data.entry["media$group"]["media$thumbnail"][0].url);
        $(self).append('<img src="' + y + '" alt="" />');
    });
});