Question

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

这是我的代码......

$(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（）！
当你第一次点击“next”时，它会从第二个xml元素开始。
当您在最后一个元素上点击“next”时，它需要返回到第一个元素。目前它试图找到下一个元素，但没有任何东西（因为在最后一个之后没有任何东西存在！）

再次感谢!!!!!

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”的按钮，则上述编辑的代码应该有效。

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

1 个答案: