如何使用 jQuery 將 XML 文件的內容順序加載到 HTML 中

Question

How do I use jQuery to read the first item in the contents of an XML file called music.xml, display them in a DIV for five seconds, read the next XML item and display that for five seconds, loop through the XML file and then從頭再來？

HTML：

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

音樂.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 元素之前為 append 。

然后，我建議尋找一個旋轉木馬 jQuery 插件，它會在它們之間旋轉，而不是你必須處理它的那一部分。 您應該查看jCarousel Lite 。

Answer 2

首先，我知道如何使用 jQuery 解析這些的方式會給image標簽帶來問題（編輯：僅當您解析文本時；XML 結果很好），因為一旦您將它包裝在 ZF590B4FDA2C30BE28DD3C8 中，它將轉換<image>text</image> BimageC37 <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);
           }
});