0

誰かがこの問題を解決する方法を知っていることを願っています。私は JavaScript と XML が初めてです。基本的に、製品のリストを含む xml ファイルがあり、html ページの ul li リストにデータを動的にロードできました。li 要素にはタイトルと画像があり、この li 要素をクリックできるようにする必要があります。特定の製品の残りのデータを新しいページ (または div) にロードします。「Uncaught ReferenceError: i is not defined」というメッセージが表示されます 製品のリストから特定の製品をクリックした後、正しい残りのデータをロードするにはどうすればよいですか。（私の説明が十分に明確であることを願っています）これが私のコードです。最初の関数は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

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

私はこれを見つけて、少し助けになりました。一度にすべてをロードするのではなく、ボタンをクリックして img src を xml データで設定することによって、要求に応じてイメージをロードしたいということです...

    <!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 に答える
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 に答える