2012-04-10 3 views
1

편집 : Brandon의 예 때문에 최신 항목 10 개를 얻을 수있었습니다. 하지만 지금은 다른 일이 발생합니다. 10 개 항목 만로드하는 코드를 추가하기 전에 항목을 클릭하면 클릭 한 항목을 제외한 모든 항목이 숨겨지고 연결된 항목이 표시됩니다. 이제 코드 조각을 추가 했으므로 항목을 클릭 할 때 내용이 더 이상 표시되지 않습니다. 닫는 태그 또는 뭔가 잘못 되었기 때문에 나는 그것을 찾으려고 노력했지만, 그것을 알아낼 수 없습니다.XML에서 항목 수를 표시합니다. - Jquery

그래서 function itemClick(){ 부분입니다. 반환 된 XML에 대한 제어가있는 경우

$(document).ready(function(){ 
     $.ajax({ 
      type: "GET", 
      url: "http://www.flabber.nl/rss/nakko/webzap", 
      dataType: "xml", 
      success: function(xml) { 
      var $items = $(xml).find('item'); 
       for(var i = 0; i < $items.length && i < 10; i++){ 
       var myObj = $items.eq(i); 
        var urllist = myObj.find('link').text(); 
        var node = urllist.substring(urllist.lastIndexOf('-')+1); 
        var id = node; 
        var video5 = myObj.find('hosted-video-url').text(); 
        var playvid5 = "playVideo('video5')"; 
        playvid5 = playvid5.replace("video5", video5); 
        var title = myObj.find('title').text(); 
        var url = myObj.find('link').text(); 
        var brief = myObj.find('teaser').text(); 
        var long = myObj.find('lees-verder').text(); 
        var ytube = ""; 
        var src = myObj.find('iframe').attr('src'); 
        var match = /embed\/([A-Za-z0-9_]+)/.exec(long); 
        if(match) ytube = match[1]; // Found it! 
        var playytube = "playVideo('http://www.youtube.com/watch?v=ytube')"; 
        playytube = playytube.replace("ytube", ytube); 
        var pubDate = myObj.find('pubDate').text(); 
        var img = myObj.find('image').text(); 
        $('<p class="items" class="click_'+id+'" id="link_'+id+'" style="width:100%"></p>').appendTo('.class2'); 
        $('<div class="terug" style="margin-bottom: 1px; margin-left: 1%"><img src="images/terug.png"></div>').appendTo('#link_'+id); 
        $('<h2 class="title_list" style="padding-top: 10px; border-top: 1px solid #72b252;"></h2>').html(title).appendTo('#link_'+id); 
        $('<div class="introtekst"><a href="#"></a></div>').html(brief).appendTo('#link_'+id); 
        $('<div class="screenshot"></div>').html('<img src="'+img+'" height="120"/>').appendTo('#link_'+id); 
        $('<h2 class="title"></h2>').html(title).appendTo('#link_'+id); 
        $('.terug').hide(); 

         function itemClick(){ 
        $('.items').hide(); 
         $('.terug').show(); 
         $('#link_'+id).unbind('click'); 
         $('<div class="introtekst_gal"><a href="#"></a></div>').html(brief).appendTo('#link_'+id); 
         $('<div class="html5vid"></div>').html('<a href="#" onclick="'+playvid5+'"><img src="'+img+'" style="margin-bottom: 20px;"/><div class="play"><img src="images/play.png" /></div></a>').appendTo('#link_'+id); 
         $('<div class="content"></div>').html('<a href="#" onclick="'+playytube+'"><img src="'+img+'" style="margin-bottom: 20px;"/><div class="play"><img src="images/play.png" /></div></a>').appendTo('#link_'+id); 
         $('<div class="openbrowser" id="link_'+id+'"></div>').html('<a href="'+url+'"><img src="images/naarf.png" /></a>').appendTo('#link_'+id); 
         $(this).toggle(); 
         if (video5 == ""){ 
               $('.html5vid').remove(); 
               $('.screenshot').hide(); 
         } 
         else { 
               $('.content').remove(); 
               $('.screenshot').hide();              
         } 
         }; 



        $('#link_'+id).bind('click', itemClick);       

        $('.terug').mousedown(function(){ 
        $(".items , .screenshot").show();      
        $(".content , .openbrowser , #videoplayer-0 , #videoplayer-1 , .html5vid , .introtekst_gal").remove(); 
        $(".terug").hide(); 
        $('#link_'+id).bind('click', itemClick);                   

        }); 

        document.addEventListener("backbutton", function() { 
         $(".items , .screenshot").show(); 
         $(".content , .openbrowser , #videoplayer-0 , #videoplayer-1 , .html5vid , .introtekst_gal").remove(); 
         $(".terug").hide(); 
         $('#link_'+id).bind('click', itemClick) 
        }, false); 

       }; 


      } 

     }); 

    }); 
+0

당신은뿐만 아니라 XML을 게시 할 수 있습니다, 그래서 우리는이 구조를 어떻게 볼 수 있습니다. –

+0

질문이 업데이트되었습니다. – Rvervuurt

답변

1

, 당신이 항목의 양이 반환 제한하는 것이 좋습니다 :

여기 내 스크립트입니다. 필요한 경우에만 n 개의 항목을 모두 전송할 필요가 없기 때문에 더 나은 성능을 얻을 수 있습니다.

그렇다면 가능하지 않은 경우 고전적인 for 루프만으로 처리 된 항목의 수를 제한 할 수 있습니다.

//...    
success: function(xml) { 
    var $items = $(xml).find('item'); 
    for(var i = 0; i < $items.length && i < 10; i++){ 
     var myObj = $items.eq(i); 
     var urllist = myObj.find('link').text(); 
     var node = urllist.substring(urllist.lastIndexOf('-')+1); 
     var id = node; 
     var video5 = myObj.find('hosted-video-url').text(); 
     var playvid5 = "playVideo('video5')"; 
     //... 
    } 
} 
//...        

+0

안녕하세요, Brandon. 감사합니다. XML에 대한 제어권이 없으므로 코드를 사용했습니다. "추가로드"버튼/링크를 추가 할 수 있습니까? 나는 "<10"을 "<20"으로 바꿀 수있는 기능을 생각하고있었습니다. – Rvervuurt

+0

다행히 도울 수있었습니다! 나는 당신의 제안이 가능하다고 확신하지만, 처음 10 개를 이미 가지고 있기 때문에'for (var i = 10; i <$ items.length && i <20; i ++)'와 같은 것을 원할 것입니다. 이렇게하면 이미 가지고있는 항목을 다시로드하지 않고도 더 많은 것을로드 할 수 있습니다. 컨텍스트 (첫 번째로드 또는 더로드)를 기반으로 'i'및 '10'값을 제공하는 방법이 필요합니다. –

+0

안녕하세요 Brandon, 다른 시간에 살펴 보겠습니다. 이번 주에 인턴쉽이 끝나고 "더 많은 것을로드"기능이 필수는 아닙니다. 항목을 클릭 할 때로드되는 컨텐츠가 지금 표시되지 않으므로 지금 내 질문을 업데이트 할 것입니다. 어쩌면 당신이 나를 도울 수 :) – Rvervuurt

관련 문제