使用javaScript从xml列表加载特定元素的xml数据
我希望有人会知道如何帮助我解决这个问题，我是javaScript和XML新手。基本上，我有一个包含产品列表的xml文件，我已经成功地将数据动态加载到html页面中的ul li列表中，li元素有标题和图像，现在我需要能够单击此li元素并将特定产品的剩余数据加载到新页面（或div）中。我得到了“UncaughtReferenceError:我没有定义”我的问题是，单击产品列表中的特定产品后，如何加载正确的剩余数据。（我希望我的解释足够清楚）这是我的代码，第一个函数在html页面中生成ul li列表，displayPRInfo（）函数应该将单击的任何产品的数据加载到showPrInfo div中 请帮助我，任何帮助，谢谢阅读使用javaScript从xml列表加载特定元素的xml数据,javascript,html,xml,Javascript,Html,Xml,我希望有人会知道如何帮助我解决这个问题，我是javaScript和XML新手。基本上，我有一个包含产品列表的xml文件，我已经成功地将数据动态加载到html页面中的ul li列表中，li元素有标题和图像，现在我需要能够单击此li元素并将特定产品的剩余数据加载到新页面（或div）中。我得到了“UncaughtReferenceError:我没有定义”我的问题是，单击产品列表中的特定产品后，如何加载正确的剩余数据。（我希望我的解释足够清楚）这是我的代码，第一个函数在html页面中生成ul li列表，
function loadProducts() {
var liOpen=("<li onclick='displayPRInfo(" + i + ")'><p>");
var divOpen=("</p><div class='prod-sq-img'>");
var closingTags=("</div></li>");
var txt;
var image;
var title;
var x=xmlDoc.getElementsByTagName("product");
for (i=0;i<x.length;i++)
{
title=(x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue);
image=(x[i].getElementsByTagName("imgfile")[0].childNodes[0].nodeValue);
txt= liOpen + title + divOpen + image + closingTags ;
document.getElementById("ulList").innerHTML+=txt;
}
}
function displayPRInfo(i)
{
title=(x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue);
euPriceRet=(x[i].getElementsByTagName("euror")[0].childNodes[0].nodeValue);
euPriceTrade=(x[i].getElementsByTagName("eurot")[0].childNodes[0].nodeValue);
euPriceSet=(x[i].getElementsByTagName("eset")[0].childNodes[0].nodeValue);
minimumQuantity=(x[i].getElementsByTagName("mqty")[0].childNodes[0].nodeValue);
description=(x[i].getElementsByTagName("desc")[0].childNodes[0].nodeValue);
prBigImg=(x[i].getElementsByTagName("pimgfile")[0].childNodes[0].nodeValue);
prInfo=title+"<br>"+euPriceRet+"<br>"+euPriceTrade+"<br> "+euPriceSet+"<br> "+minimumQuantity+"<br>"+description+"<br>"+ prBigImg ;
document.getElementById("showPrInfo").innerHTML=prInfo;
}
函数加载产品（）{
var liOpen=（“liOpen=（“for（i=0；i可以使用jQuery操作xml并设置onclick事件
function loadProducts() {
var products = $(xmlDoc).find('product');
for (var i = 0; i < products.length; i++) {
$('#ulList').append('<li id="product_' + i + '"><p>' + $(products[i]).find('title').text() + '</p><div class="prod-sq-img">' + $(products[i]).find('imgfile').text() + '</div></li>');
$('#product_' + i).click(displayPRInfo.bind($('#product_' + i), products[i]));
}
}
function displayPRInfo(xmlProduct) {
var title= $(xmlProduct).find('title).text();
var euPriceRet = $(xmlProduct).find('euror').text();
var euPriceTrade = $(xmlProduct).find('eurot').text();
var euPriceSet = $(xmlProduct).find('eset').text();
var minimumQuantity = $(xmlProduct).find('mqty').text();
var description = $(xmlProduct).find('desc').text();
var prBigImg = $(xmlProduct).find('pimgfile').text();
var prInfo = title+"<br>"+euPriceRet+"<br>"+euPriceTrade+"<br> "+euPriceSet+"<br> "+minimumQuantity+"<br>"+description+"<br>"+ prBigImg ;
$('#showPrInfo').html(prInfo);
}
函数加载产品（）{
var products=$（xmlDoc.find（'product'）；
对于（变量i=0；i”++$（产品[i]）.find（'title'）.text（）++'”++$（产品[i]）.find（'imgfile'）.text（）++'）；
$（'#product_'+i）。单击（displayPRInfo.bind（$（'#product_'+i），products[i]）；
}
}
函数displayPRInfo（xmlProduct）{
var title=$（xmlProduct.find（'title.text（））；
var eupricelet=$（xmlProduct.find（'euror'）.text（）；
var euPriceTrade=$（xmlProduct.find（'eurot'）.text（）；
var euPriceSet=$（xmlProduct.find（'eset'）.text（）；
var minimumQuantity=$（xmlProduct.find（'mqty'）.text（）；
var description=$（xmlProduct.find（'desc'）.text（）；
var prBigImg=$（xmlProduct.find（'pimgfile'）.text（）；
var prInfo=title+“
”+eupricelet+”
“+euPriceTrade+”
“+euPriceSet+”
“+minimumQuantity+”
“+description+”
“+prBigImg；
$（'#showPrInfo'）.html（prInfo）；
}
我发现了这一点，它对我有一点帮助，问题是我希望按请求加载图像，而不是一次加载所有图像，而是单击一个按钮并用xml数据设置img src，我有这个
<!doctype html>
<html lang="es">
<head>
<style>
#iosslider_nav {
height: 13px;
right: 10px;
/* align right side */
/*left: 10px;*/
/* align left side */
bottom: 10px;
/*position: absolute;*/
/* set if needed */
/*margin-top: 10px;*/
/* remove if position is absolute */
}
#iosslider_nav .btn {
width: 13px;
height: 13px;
background: #eaeaea;
margin: 0 5px 0 0;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
cursor: pointer;
float: left;
/* ie 7/8 fix */
background: url('../images/bull_off.png') no-repeat\9;
}
</style>
</head>
<body>
<div id="ninja_slider"></div>
<div id="iosslider_nav"></div>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
var xmlDoc = loadXMLDoc("xml/xml_data.xml");
// generic load xml data function
function loadXMLDoc(filename) {
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else { // code for IE5 and IE6
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET", filename, false);
xhttp.send();
return xhttp.responseXML;
}
set_slider();
//set_navigation('xml/xml_data.xml', 'iosslider_nav');
function set_slider() {
var item_div = $(xmlDoc).find('desk');
var item_btn = $(xmlDoc).find('desk');
var item_img = $(xmlDoc).find('desk');
// Object.bind() handler for ie 7/8
if (!Function.prototype.bind) {
Function.prototype.bind = function (oThis) {
if (typeof this !== 'function') {
// closest thing possible to the ECMAScript 5
// internal IsCallable function
throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
}
var aArgs = Array.prototype.slice.call(arguments, 1),
fToBind = this,
fNOP = function () {},
fBound = function () {
return fToBind.apply(this instanceof fNOP && oThis ? this : oThis,
aArgs.concat(Array.prototype.slice.call(arguments)));
};
fNOP.prototype = this.prototype;
fBound.prototype = new fNOP();
return fBound;
};
}
// create main div's
for (var i = 0; i < item_div.length; i++) {
$('#ninja_slider').append('<div id="item_div' + i + '"><a href="javascript:void(0);" class="item_anchor"><img id="item_img' + i + '" src="" class="ninja_item"></a></div>');
$('#item_div' + i).on('click', load_current.bind($('#item_div' + i), item_div[i]));
}
// load first element
$('#ninja_slider #item_div0 .item_anchor img').attr('src', $(item_img[0]).find('image').text());
// create nav div's
for (var i = 0; i < item_btn.length; i++) {
$('#iosslider_nav').append('<div id="item_btn' + i + '" class="btn"></div>');
$('#item_btn' + i).on('click', load_current.bind($('#item_btn' + i), item_btn[i]));
}
}
function load_current(xmlData) {
var image = $(xmlData).find('image').text();
var src = image;
//console.log(image);
var item_img = $(xmlDoc).find('desk');
for (var i = 0; i < item_img.length; i++) {
$('#ninja_slider').append('<div id="item_div' + i + '"><a href="javascript:void(0);" class="item_anchor"><img id="item_img' + i + '" src="' + $(item_img[i]).find('image').text() + '" class="ninja_item"></a></div>');
}
}
function set_navigation(url, id) {
$.ajax({
url: url,
async: false,
type: "GET",
data: "xml",
success: function (xml) {
$(xml).find("desk").each(function () {
var item_nav = document.getElementById(id),
click_item = document.createElement("div");
item_nav.appendChild(click_item);
click_item.className = click_item.className + "btn";
});
}
});
}
</script>
</body>
</html>
#IOSU导航{
高度：13px；
右：10px；
/*右对齐*/
/*左：10px*/
/*左对齐*/
底部：10px；
/*位置：绝对位置*/
/*如果需要设置*/
/*边缘顶部：10px*/
/*如果位置为绝对位置，则移除*/
}
#国际空间站导航btn{
宽度：13px；
高度：13px；
背景：#eaeaea；
边距：0 5px 0 0；
-webkit边界半径：100%；
-moz边界半径：100%；
边界半径：100%；
光标：指针；
浮动：左；
/*ie 7/8修复*/
背景：url（'../images/bull_off.png'）不重复\9；
}
var xmlDoc=loadXMLDoc（“xml/xml_data.xml”）；
//通用加载xml数据函数
函数loadXMLDoc（文件名）{
if（window.XMLHttpRequest）{
xhttp=newXMLHttpRequest（）；
}else{//IE5和IE6的代码
xhttp=新的ActiveXObject（“Microsoft.XMLHTTP”）；
}
xhttp.open（“GET”，filename，false）；
xhttp.send（）；
返回xhttp.responseXML；
}
设置_滑块（）；
//设置导航（'xml/xml_data.xml'，'ioslider_nav'）；
函数集\u滑块（）{
var item_div=$（xmlDoc.find（'desk'）；
var item_btn=$（xmlDoc.find（'desk'）；
var item_img=$（xmlDoc.find（'desk'）；
//ie 7/8的Object.bind（）处理程序
if（！Function.prototype.bind）{
Function.prototype.bind=函数（oThis）{
if（此的类型！=“函数”）{
//最接近ECMAScript 5的东西
//内部可调函数
抛出新的TypeError（'Function.prototype.bind-尝试绑定的内容不可调用'）；
}
var aArgs=Array.prototype.slice.call（参数，1），
fToBind=这个，
fNOP=函数（）{}，
fBound=函数（）{
返回fToBind.apply（这是fNOP和oThis的实例？这是：oThis，
concat（Array.prototype.slice.call（arguments））；
};
fNOP.prototype=this.prototype；
fBound.prototype=新的fNOP（）；
返回fBound；
};
}
//创建主分区
对于（变量i=0；i