使用jQuery读取XML(Reading in XML with jQuery)

我正在尝试进行问卷调查，下一个问题取决于他们如何回答上一个问题。我试图使用一个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>

所以他们看到的第一个问题是“你想去哪个？” 并且根据他们回答哪一个，将出现一个不同的问题。

现在我的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代码不能完全实现我打算做的事情，但我需要先着手解决这个问题，然后再继续。

I am trying to make a questionnaire where the next question depends on how they answered the previous question. I am trying to do this using an XML that will have all of my questions and the jQuery will create a form each time you go to a new question.

My issue is only showing one question at a time. Here is my XML file. The idea is to create folders and each folder will have a question object with x amount of answers and then x amount of folders depending on the question they answer. Here is an example XML file:

<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>

So the first question they see will be "Which do you want to go?" and depending on which one they answer a different question will show up.

Now for my jQuery code I am attempting this:

$.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); }); }); }

The issue I am having is it finds all questions at all levels. So it will show:

Which do you want to go? You went left. You went right.

All at once instead of the first level question and then the next time though it will show the second question. Is there a way to read in an xml file so it knows what level the questions are on so it hides the first two?

Ideally the ajax should read in the first question and not see any of the other questions since they are in a sub-folder.

I do realize the jQuery code is not correct to completely implement what I am intending to do, but I need to first figure out this issue before I move on.

最满意答案

这里有几件事，主要是针对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。

There are a couple of things here, largely for XML you're going to have to realize that proper XML is organized by a structure of node types. These types and their consistency is defined by the name of the node, so having a different node name for what are essentially the same type, is wrong. Consider this 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>

Now, I don't fully understand what you are trying to do, so this probably isn't an accurate solution in terms of your specific needs, but my goal is to give you an understanding of how Xml works in terms of organizing your data.

Your jQuery when using this structure can now be better organized by searching for Keys as attritbutes and node types by their name.

更多推荐