Comment charger le contenu du fichier XML de manière séquentielle en HTML en utilisant jQuery

Question

Comment utiliser jQuery pour lire le premier élément dans le contenu d'un fichier XML appelé music.xml, les afficher dans un DIV pendant cinq secondes, lire le prochain XML article et affiche que pendant cinq secondes, boucle dans le fichier XML, puis recommence depuis le début?

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

Tout d'abord, la façon dont je sais comment analyser ces utilisant jQuery donnera des problèmes avec le tag image (modifier: que si vous analysez le texte, XML se révèle être fine), comme une fois que vous l'envelopper dans jQuery va convertir <image>text</image> en <img>text. Vous pouvez faire face à cela, mais ce n'est pas joli. Supposons que vous avez renommé <image> en <cover>.

Fonction jsFiddle, moins la partie demande $.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); 
      } 
}); 

Answer 2

Essayez quelque chose comme ceci:

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

Vous devez ajuster les chemins (pour le fichier xml et où les images sont localisées) ainsi que l'endroit où vous voulez l'ajouter dans le document. Actuellement, il s'ajoutera juste avant l'élément BODY de fermeture.

Ensuite, je vous recommande de chercher un plugin jQuery carrousel qui va tourner à travers eux plutôt que de devoir faire face à cette partie de celui-ci. Vous devriez vérifier jCarousel Lite.