用x查询和html5随机解析xml显示数据

问题描述：

你好，我是HTML5和j查询中的新手。我必须从XML解析数据，我已经成功完成。现在解析数据后，我想用j query随机显示它。请告诉我该怎么做。用x查询和html5随机解析xml显示数据

的代码片段是

// code for IE7+, Firefox, Chrome, Opera, Safari 
     xmlhttp=new XMLHttpRequest(); 
    }else { 
     // code for IE6, IE5 
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xmlhttp.open("GET","xml/multiquestions1.xml",false); 
    xmlhttp.send(); 
    xmlDoc=xmlhttp.responseXML;  

    var x=xmlDoc.getElementsByTagName("question"); 
    $(document).ready(function(){ 
     for(var j=0;j<x.length;j++) 
     { 
      if(j==0) 
      { 
       $("#navigationlist").append('<li><a href="#" id="selected_link" class="navg" onClick="display_nav('+j+',this);">'+(j+1)+'</a></li>'); 
       display_nav(j,$("#selected_link")) 
      } 
      else 
       $("#navigationlist").append('<li><a href="#" class="navg" onClick="display_nav('+j+',this);">'+(j+1)+'</a></li>'); 
     }    
    }); 

function display() 
    { 
     // for fetch question 
     Description=(x[i].getElementsByTagName("questionTxt")[0].childNodes[0].nodeValue); 
     Answer =(x[j].getElementsByTagName("image")[0].childNodes[0].nodeValue); 

     document.getElementById('options').style.backgroundImage = 'url('+Answer+')'; 

     // Assign the value 
     document.getElementById("question").innerHTML= Description; 

    } 

function display_nav(j,obj) 
    { 
     i=j; 
     $("#feedback").html(""); 
     $(".navg").each(function(){ 

      $(this).removeAttr("id");       
     }); 

     $(obj).attr("id","selected_link"); 
     Description=(x[j].getElementsByTagName("questionTxt")[0].childNodes[0].nodeValue); 
     Answer =(x[j].getElementsByTagName("image")[0].childNodes[0].nodeValue); 
     answermin=(x[j].getElementsByTagName("answermin")[0].childNodes[0].nodeValue); 
     answermax=(x[j].getElementsByTagName("answermax")[0].childNodes[0].nodeValue); 

     $("#bob").attr("min",answermin); 
     $("#bob").attr("max",answermax); 
     $("#bob").attr("value",0); 
     $("#out").html(0); 
     $("#out").css({left:0}); 

     // Assign the value 
     document.getElementById("question").innerHTML= Description; 
     //document.getElementById("options").style.backgroundImage = url(Answer); 
     document.getElementById('options').style.backgroundImage = 'url('+Answer+')';  
    } 

and xml is 

<?xml version="1.0" encoding="utf-8"?> 
<FlashCards> 
    <question id="1"> 
    <questionTxt type="text"><![CDATA[Hello!]]></questionTxt> 
<image visible="true"><![CDATA[img/smiley1.png]]></image> 
    </question> 
<question id="2"> 
    <questionTxt type="text"><![CDATA[Hi]]></questionTxt> 
<image visible="true"><![CDATA[img/smiley2.png]]></image> 

</question> 
</FlashCards>

因为您使用jQuery，您应该在所有方面都使用它。像'getElementsByTagName，getElementById'一样，甚至不需要整个'xmlhttp'部分。它会为你节省很多打字和痛苦。 – 2012-04-19 05:56:27

没有得到:(。你能否详细说明我应该在哪里做更改？ – Naina 2012-04-19 06:40:12

1.例如，您可以用一个简单的方法完成整个请求：'.get（）'，'getElementsByTagName'可以被替换'（'tagName'）'，'getElementById' by'$（'＃idName'）'...您应该深入研究jQuery。 2.您发布的代码看起来相当复杂，并不是很多人想挖通过和发现错误，你应该减少到真正需要的东西，像i，j，s，x这样的变量也没有那么有用，它需要花费很多时间来找出它们的用途。 – 2012-04-19 06:55:39

答

jQuery的本身自带的分析功能jQuery.parseXML() - >parseXML

然后你就可以做搜索ontop的解析XML的更容易。

var xml = $.parseXML(xmlString), 
    // find and count all questions 
    questionCount = xml.find('question').length(); 
// find a random question out of the pool 
xml.find('question#'+ Math.floor(Math.random() * (questionCount + 1))):

我没有测试它，但我希望你明白这一点。

用x查询和html5随机解析xml显示数据

相关推荐