Question

我正在开发一个基于网络的应用程序，其中包含＆＃39; divs＆＃39;我用于可点击的按钮。目前，我的代码为每个＆＃39; 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解析，您的示例是正确的。唯一不明确的地方是buttons中的jQuery(buttons).find("button");变量。以下示例正确解析示例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数据接收回来。下载成功完成后，将解析文档。

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

1 个答案: