JavaScript/XML DOM无法正常工作

我遇到了一些XML DOM。（以前从未真正使用过它，但我以为我会拍摄。） - 我正在将其用于我的投资组合（以及其他内容的内容。）在我的网站上，将缩略图与他们的链接，标题，描述等链接在一起。

无论如何，我不确定问题是什么，但是它不起作用。/：

.js

function loadXMLDoc(dname)
{
if (window.XMLHttpRequest)
  {
  xhttp=new XMLHttpRequest();
  }
else
  {
  xhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xhttp.open("GET",dname,false);
xhttp.send();
return xhttp.responseXML;
}
function imageList(value)
{
    xmlDoc=loadXMLDoc("uploads.xml");
    x=xmlDoc.getElementsByTagName(value)[0].childNodes;
    for (i=0;i<x.length;i++)
    {
        document.write("<h1>"+x[i].getAttribute('id')+"</h1>");
        document.write("<ul style='list-style-type: none;'>");
        y=x[i].childNodes;
        for(j=0;j<y.length;j++)
        {
            document.write("<li style='background: url("+y[j].getAttribute('thumbnail')+") no-repeat center center;'><a href='#'></a></li>");   
        }
        document.write("</ul>");
    }
}

.html

<html>
    <head>
        <script type="text/javascript" src="js/xmldata.js"></script>
    </head>
    <body>
        <script>
            imageList("portfolio");
        </script>
    </body>
</html>

.xml

<?xml version="1.0" encoding="UTF-8"?>
<portfolio>
    <year id="2014">
        <image thumbnail="" href="" desc=""></image>
        <image thumbnail="" href="" desc=""></image>
        <image thumbnail="" href="" desc=""></image>
    </year>
    <year id="2013">
        <image thumbnail="" href="" desc=""></image>
        <image thumbnail="" href="" desc=""></image>
        <image thumbnail="" href="" desc=""></image>
        <image thumbnail="" href="" desc=""></image>
        <image thumbnail="" href="" desc=""></image>
        <image thumbnail="" href="" desc=""></image>
        <image thumbnail="" href="" desc=""></image>
        <image thumbnail="" href="" desc=""></image>
        <image thumbnail="" href="" desc=""></image>
        <image thumbnail="" href="" desc=""></image>
        <image thumbnail="" href="" desc=""></image>
        <image thumbnail="" href="" desc=""></image>
    </year>
    <year id="2012">
        <image thumbnail="" href="" desc=""></image>
        <image thumbnail="" href="" desc=""></image>
        <image thumbnail="" href="" desc=""></image>
        <image thumbnail="" href="" desc=""></image>
    </year>
    <year id="2011">
        <image thumbnail="" href="" desc=""></image>
        <image thumbnail="" href="" desc=""></image>
        <image thumbnail="" href="" desc=""></image>
    </year>
</portfolio>

看来您只是没有处理文本节点。从您的代码中在JSFiddle中进行完美的演示有点棘手（JSFIDDLE不允许document.write，而Ajax Echo是一项邮政服务，但是有了一点jQuery，您可以隐藏这些详细信息（是的，我知道我知道我对Jquery做了nit，）并专注于对渲染代码（演示）进行这些简单的更改：

首先添加这两个助手功能（从此处）：

function is_ignorable( nod )
{
  return ( nod.nodeType == 8) || // A comment node
         ( (nod.nodeType == 3) && is_all_ws(nod) ); // a text node, all ws
}
function is_all_ws( nod )
{
  // Use ECMA-262 Edition 3 String and RegExp features
  return !(/[^tnr ]/.test(nod.data));
}

成功回调可以被重写为：

function imageList(value)
{
    xmlDoc=loadXMLDoc("uploads.xml");
    x=xmlDoc.getElementsByTagName(value)[0].childNodes;
    for (i=0;i<x.length;i++)
    {
      if(!is_ignorable(x[i])) {
        document.write("<h1>"+x[i].getAttribute('id')+"</h1>");
        document.write("<ul style='list-style-type: none;'>");
        y=x[i].childNodes;
        for(j=0;j<y.length;j++)
        {
          if(!is_ignorable(y[j])) {
            document.write("<li style='background: url("+y[j].getAttribute('thumbnail')+") no-repeat center center;'><a href='#'></a></li>");
          }
        }
        document.write("</ul>");
       }
    }
}

相关内容

最新更新

热门标签：