javascript - 从 XML 文件中分离出一个结果

Question

我正在 Phonegap 中使用 HTML(5)、CSS3 和 Javscript(和 friend )编写一个应用程序。但我有一个问题:解析 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>

提前致谢!如果您有任何疑问或者我不够清楚，请提问，我会尽力澄清!

重要提示:我无法使用 PHP，因为 Phonegap 不支持 PHP。接受的语言:HTML(5)、CSS(3) 和 Javascript(包括 Jquery、Ajax 等)

Answer 1

我建议存储原始 xml，然后对其进行处理。 这样，您可以执行以下操作: 当用户点击某个元素时，您将调用 showElement(id) 等函数，然后从存储的 xml 中检索详细信息(将其视为主列表或数据库)。

这是大多数网络应用程序的制作方式。