Question

我有以下XML文件：

<?xml version='1.0' encoding='utf-8'?>
<Answers>
    <Question1  q="What is your favourite colour?&lt;br /&gt;">
        <a1>Blue</a1>
        <a2>purple</a2>
        <a3>Green</a3>
        <a4>Red</a4>
        <a value="0">0</a>
        <b value="0">0</b>
        <c value="1">0</c>
        <d value="0">0</d>
    </Question1>
    <Question2  q="What is the colour of the grass?&lt;br /&gt;">
        <a1>Blue</a1>
        <a2>Green</a2>
        <a3>Purple</a3>
        <a4>Red</a4>
        <a value="0">0</a>
        <b value="1">0</b>
        <c value="0">0</c>
        <d value="0">0</d>
    </Question2>
    <Question3  q="What is the average air speed of an unladen swallow?&lt;br /&gt;">
        <a1>10mph</a1>
        <a2>15mph</a2>
        <a3>30mph</a3>
        <a4>European or African swallow?</a4>
        <a value="0">0</a>
        <b value="0">0</b>
        <c value="0">0</c>
        <d value="1">0</d>
    </Question3>
</Answers>

我正在使用以下代码解析它：

function runQuiz(whichQ) {
            if (window.XMLHttpRequest) { 
                xmlhttp = new XMLHttpRequest(); 
            } else { 
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //If browser == IE, get ActiveX object
            } 
            xmlhttp.open("GET", whichQ, false);  //Open the file using the GET routine
            xmlhttp.send();  //Send request
            xmlDoc = xmlhttp.responseXML;  //xmlDoc holds the document information now

            var atext,btext,ctext,dtext = 0;

            $(xmlDoc).find("Question1").each(function() {           
                var a = xmlDoc.childNodes[0].children[0];

                $('#form').prepend( $(xmlDoc).find("Question1").attr('q') ); //Append Question

                $(a).find("a1").each(function() {
                    $('#form').append('<input type="radio" name="answer1" class="a1" value="15mph"> 15mph<br />');
                    atext = $(this).parent().children('a').text();
                });
                var a = xmlDoc.childNodes[0].children[0];
                $(a).find("a2").each(function() {
                    $('#form').append('<input type="radio" name="answer2" class="a2" value="20mph"> 20mph<br />');
                    btext = $(this).parent().children('b').text();
                });
                var a = xmlDoc.childNodes[0].children[0];
                $(a).find("a3").each(function() {
                    $('#form').append('<input type="radio" name="answer3" class="a3" value="15mph"> 30mph<br />');
                    ctext = $(this).parent().children('c').text();
                });
                var a = xmlDoc.childNodes[0].children[0];
                $(a).find("a4").each(function() {
                    $('#form').append('<input type="radio" name="answer4" class="a4" value="eurofrican"> European or African Swallow?<br />');
                    dtext = $(this).parent().children('d').text();
                });

                $('.label, .cu-mid p').fadeOut(150); //Fade out the letters on the bars and the overhead labels
                $('.cu-mid','.cuboid.'+'green1').animate({ height: atext*2 }, 550,'easeOutBounce'); //animate 1
                $('.cu-mid','.cuboid.'+'green2').animate({ height: btext*2 }, 550,'easeOutBounce'); //animate 2
                $('.cu-mid','.cuboid.'+'green3').animate({ height: ctext*2 }, 550,'easeOutBounce'); //animate 3
                $('.cu-mid','.cuboid.'+'green4').animate({ height: dtext*2 }, 550,'easeOutBounce', function() { //animate 4 then...
                    $('.label1').html(atext+'%'); //Set all four labels
                    $('.label2').html(btext+'%');
                    $('.label3').html(ctext+'%');
                    $('.label4').html(dtext+'%');
                    $('.label, .cu-mid p').fadeIn(150); //Fade it all back in
                });
            });
        }

所以我的问题是：这样做有更好/更有效/更优雅的方法吗？ 我正在遍历XML文档并检索其他元素的子节点。

欢迎任何和所有想法！：d

Answer 1

$(a)，多次调用$('#form') - 使用变量。
var a = xmlDoc.childNodes[0].children[0]多次调用 - 为什么？
你需要这些动画吗？！
通常，您会将一些信息附加为带有硬编码文本的输入标记。为什么不使用XML中的文本？
此代码绑定到数据太多。如果有5个问题怎么办？如果您可以控制此XML，我建议您重新设计。

Answer 2

至于简单性，如果你使用jQuery，也可以直接使用$ .get（）而不是XMLHttpRequest：http://api.jquery.com/jQuery.get/

优化我的Javascript / jQuery XML函数

2 个答案: