아약스와 jquery를 통해 클릭시 다음 xml 요소로드

Question

클릭 기능을 사용하여 XML 파일을 순환 할 수 있어야합니다. 페이지가로드 될 때 1 xml 요소 만로드 한 다음 클릭 기능을 사용하여 다음로드합니다. 콘텐츠 슬라이더와 비슷하지만 요청시로드합니다. 나는 당신에게 제목이있는 튜브 비디오를 보여주기 위해 그것을 사용하고 있습니다. 어떤 도움

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

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

많은 감사 :

여기 내 코드의

...

$(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 코드입니다.

편집 여기

지금 내 현재 코드입니다 - 다음과 같은 문제가 존재가 있기 때문에 약간의 오차 개조하면 되겠 어의 약간의 몇 필요 ... 그것은 종류의 작동

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

이 코드는 직접 작동하지 않을 수도 있지만 생각입니다. 그걸 가지고 놀면 그걸 가져올거야.

편집

내가 클릭 이벤트가 작동하지 않았다 그 이유는, 내가이 증가하는 것을 잊었다!

EDIT2

당신이 '이전'ID로 버튼 ID로 버튼을 한 경우

'다음'위의 편집 코드가 작동합니다.