1

我对 js 和 jQuery 很陌生，请原谅我的错误代码。尝试从关键字查询中动态生成格式化的 YouTube 缩略图/网址表。缩略图需要包含在带有 fancybox 类设置的标签中才能触发 fancybox 播放器。我将所有必要的“a”和“img”标签设置为 vars，只是尝试解析视频 ID 的 JSON 提要，将它们插入 url 和缩略图模板，然后生成一个表格，在之后开始新的拇指行每 9 个细胞。

这是我的代码。现在它只生成一列并不断重复相同的 ID 并在每次迭代时添加一个新的。非常感谢任何帮助！

<script type="text/javascript">

    var vidCell1 = '<a class="fancybox-media" href="https://www.youtube.com/watch?v=';
    var vidCell2 = '"><img src="http://i.ytimg.com/vi/';
    var vidCell3 = '/hqdefault.jpg" width="100" alt="" /></a>';
    var mytablebody = '<tbody><tr>';
    var ti;
    var id;

    $.getJSON("https://gdata.youtube.com/feeds/api/videos?q=mirthkon&v=2&alt=jsonc",function(youtubeJSON) {

        ti = youtubeJSON.data.totalItems;    
        for (var i=0; i<=ti; i++) {            
            id = youtubeJSON.data.items[i].id;
            mytablebody += "<td>" + vidCell1 + id + vidCell2 + id + vidCell3 + "</td>";
            mytablebody += "</tr></tbody>";
            $('.thumbs').append(mytablebody);
        };    
    });​
</script>
</head>
<body>
    <table class="thumbs" width="100" height="100" border="2" cellpadding="0" cellspacing="0"></table>​
</body>
4

2 回答 2

0

你需要遍历你没有做的结果，这就是为什么你一遍又一遍地获得相同的 id。

$.getJSON("//URL", function(json) {
     $.each(json, function(key, val) {
         render(val);
     });
 })

这是一个如何做到这一点的例子。

http://jsfiddle.net/jeremyspouken/XLWUC/

于 2012-06-06T18:03:13.763 回答
0 
var tmpl = '<a class="fancybox-media" href="https://www.youtube.com/watch?v={{id}}"><img src="http://i.ytimg.com/vi/{{id}}/hqdefault.jpg" width="100" alt="" /></a>';
jQuery.getJSON("https://gdata.youtube.com/feeds/api/videos?q=mirthkon&v=2&alt=jsonc",function(json) {
   jQuery.each(json.data.items, function(i, item){
       jQuery(document.body).append(tmpl.replace(/{{id}}/g, item.id));
   });
});

这又快又脏，我使用 Chrome 检查器在这个 stackoverflow 页面上做到了。它只是将所有创建的 youtube 链接附加到文档中。为了进行优化，您应该在循环之前创建一个 div，将所有链接附加到循环中，然后在循环之后将该一个 div 附加到 DOM。此外，在测试这个时，它看起来像 Youtube 限制了 API 调用，所以你可以将它缓存在 localStorage 或其他东西中，这样你就不会在每次访问页面时对 youtube 进行大量调用。

另外两条评论：我为您创建了一个模板字符串，因此您不必每次都构建一个长字符串。编写和测试脚本时console.log是你的朋友。console.log(youtubeJSON)例如查看数据的样子。您也可以对您不了解其中传递给您的数据的函数执行此操作。在里面，jQuery.each您可以console.log('args', arguments)记录该方法每次传递给您的内容。

干杯。

于 2012-06-06T21:14:27.580 回答