Question

我对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>

Answer 1

你需要通过你没有做的结果进行迭代，这就是为什么你一遍又一遍地得到相同的id。

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

以下是如何操作的示例。

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

Answer 2

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)记录每次方法传递给您的内容。

干杯。

使用jQuery从YouTube API动态显示缩略图/网址表

2 个答案: