0

我希望有人知道如何帮助我解决这个问题,我是 javaScript 和 XML 的新手。基本上我有带有产品列表的 xml 文件,我已经设法将数据动态加载到我的 html 页面中的 ul li 列表中,li 元素有标题和图像,现在我需要能够点击这个 li 元素并将特定产品的剩余数据加载到新页面(或 div)中。我收到“未捕获的 ReferenceError:我未定义”我的问题是如何在单击产品列表中的特定产品后加载正确的剩余数据。(我希望我的解释足够清楚)这是我的代码,第一个函数在 html 页面中生成 ul li 列表,displayPRInfo() 函数应该将数据加载到任何被点击的产品的 showPrInfo div 中。

请帮助我,任何帮助表示赞赏,感谢阅读。

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;
}
4

3 回答 3

0

我还没有尝试过整个脚本,但肯定你必须移动它:

liOpen=("<li onclick='displayPRInfo(" + i + ")'><p>")

进入for循环

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);
    liOpen=("<li onclick='displayPRInfo(" + i + ")'><p>");
    txt=  liOpen +  title + divOpen + image + closingTags ;
    document.getElementById("ulList").innerHTML+=txt;
}

实际i定义的地方

于 2013-02-08T13:04:08.343 回答
0

您可以使用 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);
}
于 2013-02-08T13:14:41.673 回答
0

我发现了这个,它对我有点帮助,问题是我想按请求加载图像,而不是一次加载它们,而是通过单击一个按钮并使用 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>

希望这是有道理的...

于 2015-04-28T19:25:19.893 回答