使用jQuery读取XML

时间:2014-06-23 22:08:28

标签: javascript jquery xml

我正在尝试制作问卷,其中下一个问题取决于他们如何回答上一个问题。我试图使用一个XML来完成这个工作,这个XML将包含我的所有问题,每次你去一个新问题时jQuery都会创建一个表单。

我的问题一次只显示一个问题。这是我的XML文件。我们的想法是创建文件夹,每个文件夹都有一个带有x个答案的问题对象,然后是x个文件夹,具体取决于他们回答的问题。这是一个示例XML文件:

<folder>
   <question>
       <ask>Which do you want to go?</ask>
       <answer go='folder1'>Go to Left</answer>
       <answer go='folder2'>Go to Right</answer>
   </question>



   <folder1>
       <question>
           <ask>You went left.</ask>
           <answer go='finish1'>Go to Finish</answer>
           <answer go='finish2'>Go to Finish</answer>
       </question>


       <finish1>
           <role>
               <name>Hello World</name>
               <description>COOL THING</description>
           </role>
       </finish1>


       <finish2>
           <role>
               <name>FINISH2</name>
               <description>COOL THING 2</description>
           </role>
       </finish2>
   </folder1>



   <folder2>
       <question>
           <ask>You went right.</ask>
           <answer go='finish1'>Go to Finish</answer>
           <answer go='finish2'>Go to Finish</answer>
       </question>


       <finish1>
           <role>
               <name>Hello World</name>
               <description>COOL THING</description>
           </role>
       </finish1>


       <finish2>
           <role>
               <name>FINISH2</name>
               <description>COOL THING 2</description>
           </role>
       </finish2>
   </folder2>

</folder>

所以他们看到的第一个问题是&#34;你想去哪个?&#34;并且根据他们回答哪一个,将出现一个不同的问题。

现在我正在尝试这个jQuery代码:

$.ajax({
url:"includes/xml/questions.xml",
dataType:"xml",
success:function(data){
    // Clear out the form
    $('#quizQuestions').children().remove();
    $('#quizTitle').children().remove();

    $(data).find('folder').each( function(){
        $(data).find('question').each( function(){

            var infoTitle = "<b>" + $(this).find("ask").text()+ "</b>";
            var infoForm = "<input type='submit'>";

            $(data).find('answer').each( function(){

                // Will add in a radio button

            });

            $('#quizTitle').append(infoTitle);
            $('#quizQuestions').append(infoForm);

        });


    });
}

我遇到的问题是它在各个层面都找到了所有问题。所以它会显示:

你想去哪个? 你走了 你走对了。

一次性而不是第一级问题,然后下一次虽然它会显示第二个问题。有没有办法读取xml文件,因此它知道问题的级别,所以它隐藏了前两个?

理想情况下,ajax应该在第一个问题中阅读,而不会看到任何其他问题,因为它们位于子文件夹中。

我确实认识到jQuery代码不能完全实现我打算做的事情,但我需要先着手解决这个问题。

1 个答案:

答案 0 :(得分:1)

这里有几件事,主要是针对XML,您必须意识到正确的XML是由节点类型的结构组织的。这些类型及其一致性由节点的名称定义,因此具有基本相同类型的不同节点名称是错误的。考虑一下这个XML:

<DocumentElement>
    <Folders>
        <Direction Key="folder0">
            <question>
                <ask>Which do you want to go?</ask>
                <answer go='folder1'>Go to Left</answer>
                <answer go='folder2'>Go to Right</answer>
            </question>
        </Direction>
        <Direction Key="folder1">
            <question>
                <ask>You went left.</ask>
                <answer go='finish1'>Go to Finish</answer>
                <answer go='finish2'>Go to Finish</answer>
            </question>
        </Direction>
    </Folders>
    <Finishers>
        <finish key="finish1">
            <role>
                <name>Hello World</name>
                <description>COOL THING</description>
            </role>
        </finish>
        <finish key="finish2">
            <role>
                <name>FINISH2</name>
                <description>COOL THING 2</description>
            </role>
        </finish>
    </Finishers>
</DocumentElement>

现在,我并不完全明白您要做的事情,因此根据您的具体需求,这可能不是一个准确的解决方案,但我的目标是让您了解Xml在组织数据方面的工作原理。

现在可以通过按名称搜索键作为attritbutes和节点类型来更好地组织使用此结构的jQuery。