不确定如何设计使用XML创建HTML对象的JavaScript/jQuery功能

我使用JavScript和jQuery来读取XML文档并随后使用XML中的信息创建HTML对象。不确定如何设计使用XML创建HTML对象的JavaScript/jQuery功能

XML文档中的主'C'节点都有一个type属性，根据类型我想运行一个函数，该函数将使用分配给该特定'C'节点的其他属性创建一个新的html对象节点。

目前，我有一个for循环，它从XML中提取每个“C”节点，也是属性（例如宽度，高度，x，y）。

同样在for循环中，我有一个if语句，它检查正在处理的当前'C'节点的'type'属性，并根据类型运行不同的函数，然后创建一个新的HTML对象与从XML中绘制的属性。

问题是可能有多个相同类型的'C'节点，所以例如当我创建的函数将在'type = 1'的'C'节点被检测到时运行，我不能使用'var p = document.createElement('p')'，因为如果在循环的稍后出现相同类型的'C'节点，它将冲突并用刚刚创建的变量覆盖该元素。

我不太确定如何解决这个问题？

这是我的整个脚本。如果你需要我详细说明任何部件请问，我敢肯定，它不是写在最好的可能的方式：

var arrayIds = new Array(); 
$(document).ready(function(){ 
    $.ajax({ 
    type: "GET", 
    url: "question.xml", 
    dataType: "xml", 
    success: function(xml) 
    { 
        $(xml).find("C").each(function(){ 
         arrayIds.push($(this).attr('ID')); 
        }); 


        var svgTag = document.createElement('SVG'); 
        // Create question type objects 
        function ctyp3(x,y,width,height,baC) 
        { 
         alert('test'); 
         var r = document.createElement('rect'); 
         r.x = x; 
         r.y = y; 
         r.width = width; 
         r.height = height; 
         r.fillcolor = baC; 
         svgTag.appendChild(r); 
        } 

        // Extract question data from XML 
        var questions = []; 
        for (j=0; j<arrayIds.length; j++) 
        { 
        $(xml).find("C[ID='" + arrayIds[j] + "']").each(function(){ 
         // pass values 
         questions[j] = { 
          typ: $(this).attr('typ'), 
          width: $(this).find("I").attr('wid'), 
          height: $(this).find("I").attr('hei'), 
          x: $(this).find("I").attr('x'), 
          y: $(this).find("I").attr('x'), 
          baC: $(this).find("I").attr('baC'), 
          boC: $(this).find("I").attr('boC'), 
          boW: $(this).find("I").attr('boW') 
         } 

         alert($(this).attr('typ')); 

         if ($(this).attr('typ') == '3') 
         { 
          ctyp3(x,y,width,height,baC); 
          // alert('pass'); 
         } else { 
          // Add here 
          // alert('fail'); 
         } 
        }); 
        } 
    } 
    }); 
});

来源

2010-06-03 Jack Roscoe

你能发表你的代码的例子吗？ – 2010-06-03 14:17:48

我的示例使用$。每（）函数的jQuery并将该元素添加到<body>标记使用链接功能，以便您永远不必创建变量p。

尽管作者在写完我的代码后发布了他们的代码示例，但我会将其留在这里以防其他人从中受益。

看到它在jsFiddler：http://jsfiddle.net/gKN4V/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Untitled Document</title> 
<script type="text/javascript" 
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> 
<script type="text/javascript"> 
    var xmlString = '<root>' 
    + '<C type="1" x="25" y="30" text="My cool div" />' 
    + '<C type="2" x="50" y="75" text="My other div" />' 
    + '<C type="1" x="100" y="10" text="My fun div" />' 
    + '<C type="2" x="150" y="150" text="My awesome div" />' 
    + '</root>'; 

$(function() { 
    var xml = $(xmlString); 
    $("C", xml).each(function(i,o) { 
    var node = $(o); 

    switch(node.attr("type")) { 

     case "1" : 
     $("<p />", { 
      "class" : "type1", 
      css : { 
      left :node.attr("x") + "px", 
      top : node.attr("y") + "px" 
      } 
     }).text(node.attr("text")).appendTo("body"); 
     break; 

     case "2": 
      $("<div />", { 
      "class" : "type2", 
      css : { 
       left :node.attr("x") + "px", 
       top : node.attr("y") + "px" 
      } 
      }).text(node.attr("text")).appendTo("body"); 
          break; 
     } 

    }); 
    }); 

</script> 
<style type="text/css"> 
    .type1 { 
    position: absolute; 
    border: solid 1px gray; 
    font: normal 12px Arial, Helvetica, sans-serif; 
    } 
    .type2 { 
    position: absolute; 
    border: solid 1px green; 
    font: bold 12px Arial, Helvetica, sans-serif; 
    color: green; 
    } 
</style> 
</head> 
<body> 
</body> 
</html>

来源

2010-06-03 14:24:28 jessegavin

我不能使用'var p = document.createElement('p')'因为如果同一类型的'C'节点的循环后出现会发生冲突，并覆盖该元素

只是不要使用固定的变量名称。让您的循环向数组中添加元素：

var elementList = []; 
var Cs = xml.getElementByTagName("C"); 
for (var i=0; i<Cs.length; i++) { 
    elementList.push(whateverYourFunctionIsThatCreatesHtmlNodes(Cs[i])); 
}

或者将它们添加到循环体中的DOM的右侧。

来源

2010-06-03 14:25:14 Tomalak

不确定如何设计使用XML创建HTML对象的JavaScript/jQuery功能

回答

相关问题