不確定如何設計使用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功能

回答

相關問題