通過ajax和jquery加載下一個xml元素

Question

我需要能夠使用點擊功能循環訪問xml文件。當頁面加載時，我只想要加載1個XML元素，然後使用點擊函數加載下一個。有點像內容滑塊，但要求時加載每一個。我正在使用它來顯示帶有標題的you tube視頻。

這裏是我的代碼...

$(document).ready(function(){ 
$.ajax({ 
type: "GET", 
    url: "video.xml", 
    dataType: "xml", 
    success: function(xml) { 
     $(xml).find('video').each(function(){ 
      var title = $(this).find('title').text(); 
      var embed = $(this).find('embed').text(); 
      $('<div class="video"></div>').html('<iframe width="300" height="200" src="http://www.youtube.com/embed/'+embed+' frameborder="0"></iframe><h2>'+title+'</h2>').appendTo('#video_block'); 
     }); 
    } 
}); 
}); 

下面是XML代碼：

<video> 
<title>Title 1 here</title> 
<embed>FScJfrh80UY</embed> 
</video> 

<video> 
<title>Title 2 here</title> 
<embed>FScJfrh80UY</embed> 
</video> 

任何幫助非常感謝。

編輯

這裏是我現在當前的代碼 - 它需要一個輕微的夫婦，因爲一些錯誤的扭動......

$(document).ready(function(){ 
var i = 0; 
getVid(); 
$('#prev').bind('click', function() { 
i--; 
getVid(); 
$('.video').remove()  
return false; 

}) 
$('#next').bind('click', function() { 
i++; 
getVid(); 
$('.video').remove() 
return false; 

}) 
function getVid() { 
$.ajax({ 
type: "GET", 
    url: "video.xml", 
    dataType: "xml", 
    success: function(xml) { 
     oVid = $(xml).find('video:eq('+i+')'); 
     var title = oVid.find('title').text(); 
     var embed = oVid.find('embed').text(); 
      $('<div class="video"></div>').html('<iframe width="300" height="200" src="http://www.youtube.com/embed/'+embed+'" frameborder="0"></iframe><h2>'+title+'</h2>').appendTo('#video_block'); 
    } 
}); 
} 
}); 

這樣的工作，但存在以下問題：

• 它需要默認顯示第一個xml元素 - 它當前不顯示任何內容。 ***我知道這個工作。在click事件函數之前放置getVid（）！
• 當您第一次點擊「下一個」時，它會從第二個xml元素開始。
• 當您在最後一個元素上點擊「下一個」時，需要返回第一個元素。目前它試圖找到下一個元素，但沒有回來（因爲沒有什麼明顯存在於最後！）

非常感謝!!!!!

Answer 1

var i = 0; 

$('#prev').bind('click', function() { 
    i--; 
    getVid(); 
} 
$('#next').bind('click', function() { 
    i++; 
    getVid(); 
} 
function getVid() { 
    $.ajax({ 
     type: "GET", 
     url: "video.xml", 
     dataType: "xml", 
     success: function(xml) { 
      oVid = $(xml).find('video:eq('+i+')'); 
      var title = oVid.find('title').text(); 
      var embed = oVid.find('embed').text(); 
      $('#videoDiv').html('<iframe width="300" height="200" src="http://www.youtube.com/embed/'+embed+' frameborder="0"></iframe><h2>'+title+'</h2>'); 
     } 
    }); 
}); 

此代碼可能不會直接工作，但這是一個想法。玩它，你會得到它。

編輯

我忘了我增加，這就是爲什麼click事件沒有工作！

EDIT2

如果你與ID爲「下一頁」按鈕，並與ID按鈕「下一步」上述編輯的代碼應該工作。