Javascript - 解析 XML 文档以创建数组

Question

我正在开发一个基于 Web 的应用程序，其中包含用于可点击按钮的“div”。目前，我的代码为每个需要处理的“div”按钮调用了一个 handleClick 函数。我想解析一个 xml 文档以获取我的 handleClick 函数所需的输入。我已经尝试从这个线程实现解决方案：Parsing XML with Javascript and create array，但我没有任何运气。我也一直在尝试使用以下信息：http://www.w3schools.com/xml/dom_intro.asp，但我对真正需要什么感到困惑。 w3schools 代码使用 XMLHttpRequest 函数，但 stackoverflow 代码没有。到目前为止，这是我所拥有的：

//Change background image when Login button clicked.
    handleClick("#btnLogin", "SideMenu.png", "LoginButton", "SideMenuButton");


function handleClick (inputButton, inputImage, inputIndexOFF, inputIndexON) {
    $(inputButton).click(function() {
        $("body").css("background-image", "url(" + inputImage + ")");

        //This is how I remove the highlight from the buttons.
        zIndexON(inputIndexON);
        //This is how I apply the highlight to buttons.
        zIndexOFF(inputIndexOFF);       
    }); 
}

function zIndexOFF (inputClass) {
    var x = document.getElementsByClassName(inputClass);
    for (i = 0; i < x.length; i++) {
        x[i].style.zIndex = "-1"
    }
}

function zIndexON (inputClass) {
    var x = document.getElementsByClassName(inputClass);
    for (i = 0; i < x.length; i++) {
        x[i].style.zIndex = "1"
    }
}

//XML
<buttons>
    <button>
        <inputButton>#btnLogin</inputButton>
        <inputImage>SideMenu.png</inputImage>
        <inputIndexOFF>LoginButton</inputIndexOFF>
        <inputIndexON>SideMenuButton</inputIndexON>
    </button>
</buttons>

我最初的想法是创建一个函数来根据 w3schools 页面中的信息加载 xml 文档，然后使用 for 循环来解析 xml 元素，并创建一个包含 handleClick 函数所需输入的数组，然后循环通过数组调用handleClick函数来处理所有的点击，而不是对每个按钮重复调用handleClick。如果有更简单的方法，我会全力以赴。

编辑：我创建了一个 handleClicks 函数，试图从我上面链接的帖子中实现线程。我还编辑了我的 XML 文档，使其类似于来自同一线程的 XML。

function handleClicks () {
//Get all buttons from XML
var btns = jQuery(buttons).find("button");

//Get input fields for each button in XML
for (var i = 0; i < btns.length; i++) {
    var ret = [];
    var tot = [];
    ret[0] = jQuery(btns[i]).find('inputButton').text();
    ret[1] = jQuery(btns[i]).find('inputImage').text();
    ret[2] = jQuery(btns[i]).find('inputIndexOFF').text();
    ret[3] = jQuery(btns[i]).find('inputIndexON').text();
    tot.push(ret);
}

//Call handleClick function for each button from XML doc, and pass in inputs to handleClick function
for (var j = 0; j < button.length; i++) {
    handleClick(tot[0].text, tot[1].text, tot[2].text, tot[3].text);
}

}

悬停时按钮仍然突出显示，但单击时没有任何反应。

Answer 1

关于 XML 解析您的示例是正确的。唯一不清楚的地方是jQuery(buttons).find("button"); 中的buttons 变量。以下示例正确解析示例 xml 并使用所需数据调用 handleClick：

var xml_text = "<buttons>" +
    "<button>" +
    "    <inputButton>#btnLogin</inputButton>" +
    "    <inputImage>SideMenu.png</inputImage>" +
    "    <inputIndexOFF>LoginButton</inputIndexOFF>" +
    "    <inputIndexON>SideMenuButton</inputIndexON>" +
    "</button>" +
    "</buttons>"

var xml = $.parseXML(xml_text);

function handleClick(inputButton, inputImage, inputIndexOFF, inputIndexON) {
    console.log(inputButton +' ' + inputImage +' ' + inputIndexOFF +' ' + inputIndexON);
}

function parseXml(xml) {
    jQuery(xml).find("button").each(function() {
        var inputButton = jQuery(this).find("inputButton").text();
        var inputImage = jQuery(this).find("inputImage").text();
        var inputIndexOFF = jQuery(this).find("inputIndexOFF").text();
        var inputIndexON = jQuery(this).find("inputIndexON").text();
        handleClick(inputButton, inputImage, inputIndexOFF, inputIndexON);
    });
}

---

可以使用 jQuery GET 或 POST 请求从 Web 下载 XML 文档：

$.ajax({
    type: "POST",
    url: "/echo/xml/",
    dataType: "xml",
    data: {
        xml: xml_text
    },
    success: function(xml) {
        console.log(xml);
        parseXml(xml);
    },
    error: function(data) {
        console.log(data);
    }
})

在此示例中https://jsfiddle.net/t406v94t/ 使用 POST 请求下载 XML。样本xml_text 被发布到jsfiddle 服务器以将其作为Web 数据接收回来。下载成功后解析文档。