Question

从这里开始是我的代码的副本

var userid ='UCLdin3PebPaIVQdIC7Lp-kg'; 
var devkey ='*****************'; 



$(document).ready(function(){ 
    $.get( 
        "https://www.googleapis.com/youtube/v3/channels",{ 
            part: 'contentDetails', 
            id: userid, 
            key: devkey}, 
            function(data){ 
                $.each(data.items, function(i, item){ 
                    pid = item.contentDetails.relatedPlaylists.uploads; 
                    getVids(pid); 
                 }) 
            } 
    ); 

    function getVids(pid){ 
        $.get( 
            "https://www.googleapis.com/youtube/v3/playlistItems",{ 
                part: 'snippet', 
                playlistId: pid, 
                key: devkey}, 
            function(data){ 
                $.each(data.items, function(i, item){ 
                    console.log(item);
                    videoTitle = item.snippet.title; 
                    videoid = item.snippet.resourceId.videoId; 
                    getdur(videoid); 
                    videoimg = item.snippet.thumbnails.maxres.url; 
                    videodesc = item.snippet.description; 

                    var name ='<h4 class="modal-title">'+videoTitle+'</h4>'; 
                    var thumb ='<div class="ctr col-md-3 col-xs-12 ythumb"><a data-toggle="modal" href="#'+videoid+'"><img class="img-responsive" src="'+videoimg+'"></a></div>';
                    var desc ='<div>'+videodesc+'</div>'; 
                    var video ='<iframe src\"//www.youtube.com/embed/'+videoid+'\"></>';



                }) 
            } 
        ); 
    } 
    function getdur(videoid){ 
        $.get( 
            "https://www.googleapis.com/youtube/v3/videos", { 
                part:'contentDetails', 
                id: videoid, 
                key: devkey}, 
            function(data){ 
                $.each(data.items, function(i, item){ 
                   console.log(item);
                    videodur = item.contentDetails.duration; 
                    videolength = videodur.replace("PT","").replace("H",":").replace("M",":").replace("S","");

                    var Duration ='<div id="length" class="ytime header cat_bar"><h3 class="catbg">'+videolength+'</h3></div>';


                     thumblen ='<div class="col-md-3 col-xs-12 pad-5"><div class="ctr col-md-12 col-xs-12 ythumb"><a data-toggle="modal" href="#'+videoid+'"><img class="img-responsive" src="'+videoimg+'"></a></div><div id="length" class="ytime header cat_bar"><h3 class="catbg">'+videolength+'</h3></div></div>'
                    $('#thumb-len').append(thumblen); 
                }) 
            } 
        ); 
    } 
});

我想要做的是从var thumb和var duration获取图像并将它们输出到同一个div中

这是我计划如何工作： https://jsfiddle.net/wpqfm891/5/

这是我目前得到的 http://beta.mdl-palissy.fr/youtube.php

它正确输出时间，但我只为所有视频获得了一个thumbanil 虽然当我通过它自我附加getvids功能时它会按计划放置视频（每个视频一个）我还可以补充一点，它只是用缩略图

来解决这个问题

我可以添加这个将使用bootstrap（我将修改代码以从css获取正确的类）对于信息（如代码中所写），图像将在链接中（持续时间也将是奖励），此链接将链接到将在单击链接时显示的模式

我有可能做到这一点吗？

因为目前它还没有真正起作用

我还可以补充说，如果您需要查看它，我已经离开了控制台日志

在阅读完我的代码之后，似乎只有缩略图才会被提供一次 sushanth建议我使用promise但我无法看到这将如何解决我的问题因为我一次运行所有代码但是（如果我正确地站着）承诺是为了在另一部分之后运行某些东西代码已经运行

在对此进行了大量的研究后，我可能只想出了如何使用它我想先添加时间然后使用promise然后将图像附加到之前附加的div

我还发现appendTo会对我有什么好处吗？

附加来自两个函数jquery的代码

0 个答案: