使用 JavaScript 显示 XML 数据，在函数结束时出现问题

displaying xml data with javascript, issue at end of function?

本文关键字：结束 问题 函数 显示 JavaScript XML 数据 使用      更新时间：2023-09-26

尝试为将来的项目制作文本/示例页面。 我希望能够一次从xml文档中列出一定数量的对象，并带有一个按钮来加载下一个对象。 有点像浏览目录。 这是我得到的，我很确定问题出在 listbythree 函数的末尾。 我只是不知道如何在页面加载时将该函数插入指定的div 元素。 有什么帮助吗？

<!DOCTYPE html />
<html>
<head>
<script>
if (window.XMLHttpRequest)
  {
  xmlhttp=new XMLHttpRequest();  // code for IE7+, Firefox, Chrome, Opera, Safari
  }
else
  {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  // code for IE6, IE5
  }
xmlhttp.open("GET","books.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 
var i=0;
var x=xmlDoc.getElementsByTagName("book");
function listbythree()
{
    for (i;i<3;i++)
      {
      document.write("<div style='display:inline;float:left;background-color:#ffff99;padding:10px;width:300px;height:210px;margin:5px;font-size:14px;'><img style='float:left;padding-right:4px' src=");
      document.write(x[i].getElementsByTagName("cover")[0].childNodes[0].nodeValue + " />");
      document.write("<em>" + x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue + "</em><br/>");
      document.write(x[i].getElementsByTagName("author")[0].childNodes[0].nodeValue + "<br/>");
      document.write(x[i].getElementsByTagName("pub")[0].childNodes[0].nodeValue + "<br/>");
      document.write(x[i].getElementsByTagName("edition")[0].childNodes[0].nodeValue + "<br/>");
      document.write(x[i].getElementsByTagName("genre")[0].childNodes[0].nodeValue + "<br/>");
      document.write("Have I Read: " + x[i].getElementsByTagName("read")[0].childNodes[0].nodeValue);
      document.write("</div>");
      }
    document.getElementById("booksbythree").innerHTML=this;
};

function next()
    {
    if (i<x.length-1)
  {
  i+3;
  listbythree();
  }
}
function previous()
{
if (i>0)
  {
  i-3;
  listbythree();
  }
}
</script>
</head>
<body onload="listbythree()">
<div id="booksbythree"></div><br/><br/>
<input type="button" onclick="previous()" value="<<" />
<input type="button" onclick="next()" value=">>" />
</body>
</html>

你的 for 循环只在i<3时循环，所以它永远不会显示任何超出第三个的元素。您可以执行以下操作来解决此问题。此外，当您的 for 循环也添加到i时，您的下一个按钮是将 3 添加到i，这将使您每次单击下一步时跳过 3 个元素。

function listbythree()
{
    var j = i+3;
    for (i;i<j&&i<x.length;i++)
    {
    ....
    }
}
function next()
{
if (i<x.length-1)
{
   listbythree();
}
}

第二点，我建议你使用jQuery，它可以使AJAX和XML解析更容易。

相关文章：