Question

如何使用jQuery读取名为music.xml的XML文件内容中的第一项，在DIV中显示它们五秒钟，读取下一个XML项目并显示该项目五秒钟，循环访问XML文件然后从头开始重新开始？

HTML：

<div id="music">
    <div id="albumcover"></div>
    <div id="songdescription"></div>
</div>

music.xml

<songs>
    <item>
        <image>music_01.jpg</image>
        <description>Description of first song</description>
    </item>
    <item>
        <image>music_02.jpg</image>
        <description>Description of second song</description>
    </item>
    <item>
        <image>music_03.jpg</image>
        <description>Description of third song</description>
    </item>
</songs>

Answer 1

尝试这样的事情：

$.ajax({
  'dataType': 'xml',
  'success': function(xml)
  {
    $(xml).find('item').each(function()
    {
      var image = $(this).find('image').text();
      var description = $(this).find('description').text();

      $('<div id="music" />')
        .append($('<div id="albumcover" />').append($('<img />').attr('src', image)))
        .append($('<div id="songdescription" />').text(description))
        .appendTo('body');
    });

    // Add the code for the carousel here.
  },
  'type': 'get',
  'url': 'music.xml'
});

您必须调整路径（对于xml文件和图像所在的位置）以及在文档中添加的位置。目前，它将在关闭BODY元素之前追加。

然后，我建议寻找一个旋转木马jQuery插件，它将通过它们旋转，而不是你必须处理它的那一部分。你应该看看jCarousel Lite。

Answer 2

首先，我知道如何使用jQuery解析这些问题的方式会给image标记带来问题（编辑：只有在解析文本时才会出现问题; XML结果很好），一旦你将它包装在jQuery中，它就会将<image>text</image>转换为<img>text。你可以处理它，但它不漂亮。因此，我们假设您已将<image>重命名为<cover>。

工作jsFiddle，减去$.ajax请求部分。

var music = [];
var musicIndex = -1;
var delay = 5000;
var intervalId; // in case you want to clearInterval
var $cover = $("#albumcover");
var $desc = $("#songdescription");

function rotateMusic() {
  // Loop back to the beginning if necessary
  if (++musicIndex === music.length) {
    musicIndex = 0;
  }
  console.log(music[musicIndex].cover);

  // Create a new image, tell it to append itself and description
  // once it's loaded, tell it to load
  $("<img>").load(function() {
    $cover.empty().append($(this));
    $desc.text(music[musicIndex].desc);
  }).attr("src", music[musicIndex].cover);
}

$.ajax({
  type: "GET",
  url: "music.xml",
  dataType: "xml",
  success: function(xml) {
             // Parse each item as a node
             $(xml).find('item').each(function() {
               // Add contents of item to music array
               var $item = $(this);
               music.push({
                 cover: $item.find('image').text(),
                 desc: $item.find('description').text()
               });

             });
             // Start rotating music, then set it to a delay
             rotateMusic();
             intervalId = setInterval(rotateMusic, delay);
           }
});

如何使用jQuery将XML文件的内容按顺序加载到HTML中

2 个答案: