Question

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

这个工作正常，但我希望（如果可能的话）我们的网站没有1个，而是3个来自此频道的最新视频。我被建议更改搜索以获得3个结果而不是一个，并将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#'。

Answer 1

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

首先，变量videoId1，videoId2和videoId3是声明函数的本地变量，因此当您调用{{{{{}}时，它们将无法显示1}}和后来的。

其次，即使变量全局（尝试不在Javascript中声明全局变量，请真的，请）在调用embedYT(videoId1)函数时在成功回调中设置的值也是可见的。一旦页面加载就会执行这些函数，这可能在AJAX回调执行之前发生。要解决此问题，我们需要将embedYT调用移动到回调

第三，$.fn.find()返回一个jQuery集合（类似于数组），因此不需要将结果放入其他数组中。此外，查看youtube API的回复，您应该找到的标签是＆＃39; yt：videoid＆＃39;，而不是＆＃39; videoid＆＃39; （它的命名空间）。 In this page我已经找到了使用jQuery执行此操作的正确语法。让我们解决这两件事：

embedYT

修复后，我们可以在回调中使用$.fn.each迭代集合，并为每个元素调用var videoTag = $data.find('yt\\:videoid');，修复第二个问题：

embedYT

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

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

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

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

}
...

希望有所帮助

使用jQuery将XML中的搜索结果放入数组中

1 个答案: