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

來源

2012-04-19 Naina

因爲您使用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))):

我沒有測試它，但我希望你明白這一點。

來源

2012-04-19 07:04:03

用x查詢和html5隨機解析xml顯示數據

回答

相關問題