javascript - 如何使用 Jquery 获取 XML 文件并在每次加载时以随机顺序显示元素？

Question

我一直在尝试使用 Ajax 构建一个问答应用程序。我需要帮助创建特定功能。我创建了包含不同问题和答案的 XML 文件。基本思想是使用“get”函数来 (1) 加载一个 XML 问题文件，以及 (2) 使用“display”和“math.random”函数来显示一个随机的“question”元素(相应的“answer”元素将同时显示，但被 Javascript 隐藏。)这是我使用的 XML 文件的格式。这些节点被父节点 Words.. 包围。

<WordQuestions>
    <Question>Question1</Question>
    <Answer>Answer1</Answer>
</WordQuestions>

<WordQuestions>
    <Question>Question2</Question>
    <Answer>Answer2</Answer>
</WordQuestions>

我需要创建一个函数，可以从 XML 文件中随机选择一个问题和答案元素，将其显示给用户，但在用户后续点击时不再显示。因此，一旦向用户显示了一个问题，就需要将其从问题列表中删除，以便在下次点击时向用户显示。有人知道怎么做吗？

我已经创建了一个类似的功能，就像一个魅力，但它的局限性在于它太随机了 - 一个问题和答案元素可能永远不会被选择显示给用户，或者它可能被选择的数量不成比例次。用户需要练习所有的问题。这是此功能的精简版。

<script language = "javascript">


  function getCategory()
  {
    var XMLHttpRequestObject = false; 

    if (window.XMLHttpRequest) {
      XMLHttpRequestObject = new XMLHttpRequest();
      XMLHttpRequestObject.overrideMimeType("text/xml");
    } else if (window.ActiveXObject) {
      XMLHttpRequestObject = new 
        ActiveXObject("Microsoft.XMLHTTP");
    }


    if(XMLHttpRequestObject) {

    var P = document.LoadCategory.Load.value;
    if (P == "Category1") {XMLHttpRequestObject.open("GET", "Catgory1.xml", true)}
    if (P == "Category2") {XMLHttpRequestObject.open("GET", "Category2.xml", true)} 
    if (P == "Category3") {XMLHttpRequestObject.open("GET", "Category3.xml", true)}


      XMLHttpRequestObject.onreadystatechange = function() 
      { 
        if (XMLHttpRequestObject.readyState == 4 && 
          XMLHttpRequestObject.status == 200) { 
        var xmlDocument = XMLHttpRequestObject.responseXML;
        displayCategory(xmlDocument);
        } 
      } 

      XMLHttpRequestObject.send(null); 
    }
  }

  function displayCategory (xmldoc)
  {

    Questionnodes = xmldoc.getElementsByTagName("Question");
    Answernodes = xmldoc.getElementsByTagName("Answer");
    var i = Math.floor((Math.random()*1000)%Questionnodes.length);
    var i = Math.floor((Math.random()*1000)%Answernodes.length);        

    var displayText1 =
      Questionnodes[i].firstChild.nodeValue;

    var target = document.getElementById("targetDiv1");
    target.innerHTML=displayText1;        


    var displayText2 =
      Answernodes[i].firstChild.nodeValue;

    var target = document.getElementById("targetDiv2");
    target.innerHTML=displayText2;

  }

</script>

现在，我不知道我是否能够更改此代码以获得我想要的功能。我试过将一个 XML 文件解析为一个 javascript 数组(然后随机选择并删除一个元素)但是没有成功。如果有人有一些建议，我将不胜感激。再一次，我想要一个可以从 XML 文件中随机选择问题和答案元素的函数，但只向用户显示一次。干杯伙计们。 (抱歉，这太啰嗦了)。

Answer 1

写一个带有变量 hasbeenshown、hasbeenanswered、useranswer、函数 getquestion、函数 getanswer 的类。

实例化的类，加载时填充了 xml 文件中的值，您可以将其添加到数组并使用随机数来选择随机问题。