javascript - 优化我的 Javascript/jQuery XML 函数

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

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