Javascript - проанализировать XML-документ для создания массива

Question

Я работаю над веб-приложением, которое содержит «divs», которые я использую для кнопок с кнопками. В настоящее время мой код вызывает функцию handleClick для каждой кнопки «div», которая должна обрабатываться. Я хотел бы проанализировать 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> 

Моя первоначальная идея состояла в том, чтобы создать функцию, чтобы загрузить XML-документ за информацию со страницы w3schools, а затем использовать цикл для разбора элементов XML, и создать массив содержащий необходимые входы для функции handleClick, затем прокрутите массив, чтобы вызвать функцию handleClick для обработки всех кликов, а не повторять один и тот же вызов handleClick для каждой кнопки. Если есть более простой способ, я все уши.

EDIT: Я создал функцию 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); 
    }); 
} 

---

документом XML можно загрузить из Интернета с помощью JQuery GET или POST запроса:

$.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/ XML загружается с использованием запроса POST. Образец xml_text отправлен на сервер jsfiddle для его получения в виде веб-данных. Документ анализируется после успешного завершения загрузки.