0

我之前问了另一个问题，并设法获得了一些从 YouTube 搜索查询中获取 XML 文件的代码的帮助。然后，使用 jQuery，从 XML 文件（视频 ID）中获取所需的信息并将其放入 javascript 变量中。

这很好用，但我希望（如果可能的话）我们的网站有来自这个频道的最新视频不是 1 个而是 3 个。有人建议我更改搜索以获取 3 个结果而不是 1 个，并将 jQuery .find() 结果放入一个数组中。

问题是我认为（我真的应该说我确定）我做错了......看看：

<!-- enable jQuery -->
<script type="application/javascript" src="jquery.js"> </script>

<!-- video loading functions -->
<script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery.ajax('https://gdata.youtube.com/feeds/api/videos?author=inthegamesroom&orderby=published&prettyprint=true&start-index=1&max-results=3&v=2',{
      dataType:'xml',
      success: function(data,status, xhr ) {
      var $data =$(data);
      var videoTag = new array ($data.find('videoid'));
      var videoId1 = videoTag[0].text();
      var videoId2 = videoTag[1].text();
      var videoId3 = videoTag[2].text();
    }
  });       
  // YouTube Video embed command
  function embedYT1(id, loaction) {
    jQuery(location).append("<object width=\"1000\" height=\"563\"><param name=\"movie\" value=\"https://www.youtube.com/v/"+id+"?version=3&amp;hl=en_US\"></param><param name=\"allowFullScreen\" value=\"true\"></param><param name=\"allowscriptaccess\" value=\"always\"></param><embed src=\"https://www.youtube.com/v/"+id+"?version=3&amp;hl=en_US\" type=\"application/x-shockwave-flash\" width=\"1000\" height=\"563\" allowscriptaccess=\"always\" allowfullscreen=\"true\"></embed></object>")
  }

  // Call video embed function for 3 vids
  embedYT(videoId1, '#vid1');
  embedYT(videoId2, '#vid2');
  embedYT(videoId3, '#vid2');
});
</script>

任何人都可以帮忙吗？

您可能还注意到我有一个 embedYT 功能，旨在嵌入 3 个视频。我做对了吗？（我的桌子标签中有三个id='vid#'。

4

1 回答 1

0

好的，这里有一些问题。不要为此感到难过。您正在学习并且通常会犯错误:)

首先， vars和是声明 的函数的本地变量，因此在您调用和以后的调用时它们将不videoId1可见。videoId2videoId3embedYT(videoId1)

其次，即使全局变量（请尽量不要在Javascript中声明全局变量，真的，请）您在成功回调中设置的值在您调用embedYT函数时不可见。这些函数在页面加载后立即执行，这可能发生在执行 AJAX 回调之前。要解决这个问题，我们需要将 embedYT 调用移动到回调

第三，$.fn.find()返回一个 jQuery 集合（类似于数组），因此不需要将结果放入其他数组。此外，查看来自youtube API的响应，您应该找到的标签是“yt:videoid”，而不是“videoid”（其命名空间）。在此页面中，我找到了使用 jQuery 执行此操作的正确语法。让我们解决这两个问题：

var videoTag = $data.find('yt\\:videoid');

修复后，我们可以在回调中使用$.fn.each迭代集合并调用embedYT每个元素，从而解决第二个问题：

...
success: function(data,status, xhr ) {
  var $data =$(data);
  var videoTag = $data.find('yt\\:videoid');

  videoTag.each(function(i) {
    embedYT($(this).text(), '#vid' + i);
  });

}
...

迭代集合比访问每个元素更具未来性。如果您必须更改视频数量，则可能无需更改 javascript 即可工作。

所以最终的代码应该是这样的

<!-- enable jQuery -->]
<script type="application/javascript" src="jquery.js"> </script>

<!-- video loading functions -->
<script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery.ajax('https://gdata.youtube.com/feeds/api/videos?author=inthegamesroom&orderby=published&prettyprint=true&start-index=1&max-results=3&v=2',{
      dataType:'xml',
      success: function(data,status, xhr ) {
        var $data =$(data);
        var videoTag = $data.find('yt\\:videoid');

        videoTag.each(function(i) {
          embedYT($(this).text(), '#vid' + i);
        });

      }
    });     

    // YouTube Video embed command
    function embedYT(id, loaction) {
      jQuery(location).append("<object width=\"1000\" height=\"563\"><param name=\"movie\" value=\"https://www.youtube.com/v/"+id+"?version=3&amp;hl=en_US\"></param><param name=\"allowFullScreen\" value=\"true\"></param><param name=\"allowscriptaccess\" value=\"always\"></param><embed src=\"https://www.youtube.com/v/"+id+"?version=3&amp;hl=en_US\" type=\"application/x-shockwave-flash\" width=\"1000\" height=\"563\" allowscriptaccess=\"always\" allowfullscreen=\"true\"></embed></object>")
    }

  });
</script>

希望能帮助到你

于 2012-08-27T16:49:49.397 回答