通过 ajax 和 jquery 单击加载下一个 xml 元素

Question

我需要能够使用单击功能循环浏览 xml 文件。当页面加载时，我只想加载 1 个 xml 元素，然后使用单击功能加载下一个。有点像内容滑块，但会在请求时加载每个滑块。我用它来显示带有标题的 YouTube 视频。

这是我的代码...

$(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 元素 -目前它什么也没显示。 ***我知道这个可以工作。将 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>');
        }
    });
});

这段代码可能不会直接工作，但它是一个想法。玩一玩，你就会成功的。

编辑

我忘了增加i，这就是点击事件不起作用的原因！

edit2

如果您制作一个 id 为“prev”的按钮和一个 id 为“next”的按钮，则上面编辑的代码应该可以工作。