在for循环中查询Youtube的标题仅显示第一项

时间:2014-05-08 19:09:09

标签: javascript youtube-api jcarousel

我一直在努力建立一个基于Michael Ouellette's carousel的Youtube轮播,它使用jCarousel

我还需要获取旋转木马中各个项目的标题。我做了一些研究并尝试使用Youtube的JSON API获取标题。但是,它仅显示第一项的标题 - http://jsfiddle.net/inix/Cc8eC

我的代码:

    for (var num = 0, len = yt_videos.length; num < len; ++num) {
    yt_html = yt_html + "<li><a onclick='change_embeded(\"" + yt_videos[num] + "\")'><img src='http://img.youtube.com/vi/" + yt_videos[num] + "/2.jpg' class='myimage' style='width:150px; height:100px;' /><br>";
    jQuery.getJSON('http://gdata.youtube.com/feeds/api/videos/' + yt_videos[num] + '?v=2&alt=jsonc', function (data, status, xhr) {
        document.getElementById("videotitle").innerHTML = (data.data.title);
    });
    yt_html = yt_html + '<span id="videotitle"></span></a></li>';
}

1 个答案:

答案 0 :(得分:2)

这是因为你<span id="videotitle"></span>。您不能通过定义多次使用相同的ID。试试这个:

for (var num = 0, len = yt_videos.length; num < len; ++num) {    
    yt_html = yt_html + "<li><a onclick='change_embeded(\"" + yt_videos[num] + "\")'><img src='http://img.youtube.com/vi/" + yt_videos[num] + "/2.jpg' class='myimage' style='width:150px; height:100px;' /><br>";
    (function(i) {
        jQuery.getJSON('http://gdata.youtube.com/feeds/api/videos/' + yt_videos[i] + '?v=2&alt=jsonc', function (data, status, xhr) {
            document.getElementById("videotitle" + i).innerHTML = (data.data.title);
        });
    })(num);
    yt_html = yt_html + '<span id="videotitle' + num + '"></span></a></li>';
}