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

如何使用jQuery读取名为music.XML的XML文件内容中的第一项，在DIV中显示五秒钟，读取下一个XML项并显示五秒钟，循环遍历XML文件，然后从头开始

HTML:

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>

音乐01.jpg
第一首歌的描述
音乐02.jpg
第二首歌的描述
音乐03.jpg
第三首歌的描述

尝试以下方法：

$.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'
});

$.ajax({
“数据类型”：“xml”，
“成功”：函数（xml）
{
$（xml）.find（'item'）.each（function（）
{
var image=$（this.find（'image'）.text（）；
var description=$（this.find（'description'）.text（）；
$('')
.append（$（''）.append（$（''）.text（说明））
.附于（“主体”）；
});
//在此处添加旋转木马的代码。
},
'type'：'get'，
“url”：“music.xml”
});

您必须调整路径（用于xml文件和图像所在的位置）以及要将其添加到文档中的位置。目前，它将在结束正文元素之前追加

---

然后，我建议您寻找一个carousel jQuery插件，该插件可以在它们之间旋转，而不必处理这部分内容。您应该检查一下。

尝试以下方法：

$.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'
});

$.ajax({
“数据类型”：“xml”，
“成功”：函数（xml）
{
$（xml）.find（'item'）.each（function（）
{
var image=$（this.find（'image'）.text（）；
var description=$（this.find（'description'）.text（）；
$('')
.append（$（''）.append（$（''）.text（说明））
.附于（“主体”）；
});
//在此处添加旋转木马的代码。
},
'type'：'get'，
“url”：“music.xml”
});

您必须调整路径（用于xml文件和图像所在的位置）以及要将其添加到文档中的位置。目前，它将在结束正文元素之前追加

---

---

然后，我建议您寻找一个旋转木马jQuery插件，该插件可以在它们之间旋转，而不必处理这部分内容。您应该检查一下。

首先，我知道如何使用jQuery解析这些内容，这会给

image

标记带来问题（edit:仅当您解析文本时；XML结果良好），因为一旦在jQuery中包装它，它将首先将

文本

转换为

，我知道如何使用jQuery解析这些内容的方式将给
图像
标记带来问题（edit:仅当您解析文本时；XML结果良好），当您将它包装在jQuery中时，它会将
文本
转换为
该
music.xml
文件在哪里？它与HTML文件和所有JPG文件在同一目录中，而所有JPG文件在哪里？它与HTML文件和所有JPG文件在同一目录中如果xml文件与HTML文件和图像在同一文件夹中，您不必调整上面脚本中的路径。正如一个注意事项，jQuery将
$（“text”）
解析为
[​, “text”]
。也就是说，
“text”
将不是
（重要的是不是
）的孩子，而是兄弟姐妹。因此，您希望替换它，即使它只是类似于
xml.replace（/image/i，“cover”）
。我想其余的都很好。@Bryan：我已经在我的机器上用上面的代码测试过了，效果很好。jQuery没有更改
$（“文本”）
根据您建议的响应。没关系，您是对的。我可能不应该假设字符串和
text/xml
将被视为相同的，jQuery确实创建了一个文档对象。如果xml文件与HTML文件和图像位于同一文件夹中，您不必调整上面脚本中的路径。正如一个注意事项，jQuery将把
$（“text”）
解析为
[​, “text”]
。也就是说，
“text”
将不是
（重要的是不是
）的孩子，而是兄弟姐妹。因此，您希望替换它，即使它只是类似于
xml.replace（/image/i，“cover”）
。我想其余的都很好。@Bryan：我已经在我的机器上用上面的代码测试过了，效果很好。jQuery没有更改
$（“文本”）
从您建议的响应中。没关系，您是对的。我可能不应该假设字符串和
text/xml
将被视为相同的，而jQuery确实创建了一个文档对象。某个地方有一个bug，我已经在$（Document）下运行了整个JS。准备好了，它停止了第二幅图像和第三幅描述的旋转。我做了一些修订，应该可以解决问题。值得注意的是，我应该将调用移动到
$（xml）之外的
rotateMusic
。。每个
语句都有一个bug。我已经在$（文档）下运行了整个JS.准备好了，它停止了第二幅图像和第三幅描述上的旋转。我做了一些修订，应该可以解决问题。值得注意的是，我应该将调用移动到
rotateMusic
之外的
$（xml）…每个
语句。
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);
           }
});