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

Question

我一直在尝试基于 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>';
}

Answer 1

都是因为你的<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>';
}