使用 getJSON 中的 JSON/AJAX 信息更改多个 iframe 的 src 以包含取自 YouTube API 的 videoId答案

【问题标题】：Using JSON/AJAX information from getJSON to change the src of multiple iframes to include the videoIds taken from the YouTube API使用 getJSON 中的 JSON/AJAX 信息更改多个 iframe 的 src 以包含取自 YouTube API 的 videoId
【发布时间】：2018-11-26 00:53:10
【问题描述】：

因此，我需要四个 YouTube 视频来显示页面加载时频道中的最新视频，我正在使用

$( document ).ready(function(){
    var YouTubeAPI = "https://www.googleapis.com/youtube/v3.......>"
    $.getJSON( YouTubeAPI, function( data){
        $.each( data.items, function(i, item) {
            $(".youtube-player").attr('src', "https://www.youtube.com/embed/" + items.id.videoId + "?controls=1&amp;amp;showinfo=1&amp;amp;rel=1");
    })
}
});

这里的问题是 iframe 都显示第四个视频，而不是来自 JSON GET 的每个视频。

现在，当用 (alert(item.id.videoId); 替换以 $(".youtube-player")..... 开头的行时，我会在警报中获得所需的 VideoId，从最新的 (0) ID 开始。

【问题讨论】：

在你的循环中你有items.id我认为你需要item.id

标签： javascript jquery youtube youtube-api youtube-data-api

【解决方案1】：

可以使用eq()将相同的元素索引匹配到数据

 var $frames = $(".youtube-player");
  $.getJSON(YouTubeAPI, function(data) {
    $.each(data.items, function(i, item) {
      $frames.eq(i).attr('src', "https://www.youtube.com/embed/" + item.id.videoId + "?controls=1&amp;amp;showinfo=1&amp;amp;rel=1");
    })
  })

【讨论】：

$frames 在我的浏览器控制台中未定义。
已通过更改为 $(".youtube-player") 修复