XML 파일에서 하나의 결과 분리

Question

HTML (5), CSS3 및 Javscript (및 친구)를 사용하여 Phonegap에서 앱을 프로그래밍하고 있습니다. 나는 문제가있다 : XML 파싱이 훌륭하다. XML 파일의 모든 항목을 화면에 표시하고 CSS를 통해 스타일을 지정할 수있다.

모든 XML 항목에는 제목, 이미지, 티저 및 "lees-verder"(대부분 "포함 된 비디오 만 포함하는"자세한 내용 ")이 있습니다.

<script> 
    $(document).ready(function(){ 
     $.ajax({ 
      type: "GET", 
      url: "webzap.xml", 
      dataType: "xml", 
      success: function(xml) { 
       $(xml).find('item').each(function(){ 
        var urllist = $(this).find('link').text(); 
        var node = urllist.substring(urllist.lastIndexOf('-')+1); 
        var id = node; 
        var total = $(this).find('id').text(); 
        var title = $(this).find('title').text(); 
        var url = $(this).find('link').text(); 
        var brief = $(this).find('teaser').text(); 
        var long = $(this).find('lees-verder').text(); 
        var pubDate = $(this).find('pubDate').text(); 
        var img = $(this).find('image').text(); 
        $('<a href="http://www.flabber.nl/node/'+id+'"><div class="items" id="link_'+id+'"></div></a>').appendTo('.class2'); 
        $('<h2 class="title_list" style="margin-top: 40px;"></h2>').html(title).appendTo('#link_'+id); 
        $('<h6 class="pubDate"></h6>').html('Dit is node nummer '+id).appendTo('#link_'+id);       
        $('<div class="introtekst"></div>').html(brief).appendTo('#link_'+id); 
        $('<div class="introtekst"></div>').html(total).appendTo('#link_'+id);      
        $('<div class="screenshot"></div>').html('<img src="'+img+'" height="120"/><br />').appendTo('#link_'+id); 
        $('<h2 class="title"></h2>').html(title).appendTo('#link_'+id); 
        /*$('<div class="content"></div>').html(long).appendTo('#link_'+id); */ 
        /*$('<div class="introtekst" id="link_'+id+'"></div>').html('<a href="'+url+'">Open volledige website</a>').appendTo('#link_'+id);*/ 
       }); 
      } 

     }); 
    }); 
</script> 

내가 지금 원하는 것은 그때 새 페이지와 쇼에서 열립니다 항목에 클릭 있다는 것입니다 :

이

내가 모든 항목의 제목, 이미지와 티저를 보는 데 사용하는 스크립트입니다 제목, 이미지, 티저 그리고 "lees-verder". 또 다른 가능성은 사용자가 클릭 한 항목을 제외하고 모든 XML 컨텐트가 사라지면됩니다. "lees-verder"도로드해야합니다. 왜냐하면 단순히 "display : none;"으로 숨기 만하면됩니다. CSS에서는 어쨌든로드하고 앱 속도를 크게 떨어 뜨립니다. 물론 웹 검색을 해왔지만 필요한 정보를 찾을 수 없습니다.

여기 내 XML 파일의 조각 때문에 훨씬 쉽게 만들 수 있습니다. :)

<item> 
<title>Wat is een schrikkeljaar?</title> 
<link> 
http://www.flabber.nl/linkdump/video/wat-is-een-schrikkeljaar-10653 
</link> 
<teaser> 
<![CDATA[ 
Het is 29 februari, tijd om uit te leggen wat een schrikkeljaar is. 
]]> 
</teaser> 
<lees-verder> 
<![CDATA[ 
<p><iframe width="720" height="396" src="http://www.youtube.com/embed/xX96xng7sAE?rel=0" frameborder="0" allowfullscreen></iframe></p> <p>Check ook <a href="http://www.youtube.com/watch?v=53glKEPzElA">de video van MinutePhysics</a>.</p> 
]]> 
</lees-verder> 
<image> 
http://images.flabber.net/files/linkdump/schrikkeljaarwatishet.jpg 
</image> 
<pubDate>Wed, 29 Feb 2012 11:19:00 +0100</pubDate> 
</item> 

미리 감사드립니다. 궁금한 사항이 있거나 충분히 명확하지 않은 경우 물어 보면 명확히하려고 노력할 것입니다.

중요 : Phonegap에서 지원하지 않으므로 PHP를 사용할 수 없습니다. 허용되는 언어 : HTML (5), CSS (3) 및 자바 스크립트 (Jquery, Ajax 등 포함)

Answer 1

원래 XML을 저장 한 다음 처리하는 것이 좋습니다. 이 방법을 사용하면 과 같은 작업을 수행 할 수 있습니다. 사용자가 showElement (id)와 같은 함수를 호출 한 요소를 탭한 다음 저장된 xml에서 세부 정보를 가져옵니다 (마스터 목록 또는 데이터베이스로 참조).

이것은 대부분의 웹 응용 프로그램이 만들어지는 방식입니다.