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>

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

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

Answer 1

我建议存储原始的xml然后处理它。这样，您可以执行以下操作：当用户点击一个元素时，你调用一个像showElement（id）这样的函数，然后从存储的xml中检索细节（将它看作一个主列表或数据库）。

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

从XML文件中隔离一个结果

1 个答案: