使用 Youtube Google API 和 jQuery

Question

我正在遍历由 db 生成的每个 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="" />'); 中定义，因为您仅在 getJSON 函数内设置了 y

我会这样做

$("#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="" />');
    });
});

Answer 2

请注意，调用时 y 不在范围内：

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

我建议执行以下更改：

var y;

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

});

希望这有帮助，享受生活。