Jquery多維數組

我正在製作一個應用程序，用戶填寫徽標的所有信息並將其添加到列表中，然後他可以添加更多徽標或刪除它們。想象我添加一個徽標到列表中包含以下信息：Jquery多維數組

名稱：百事
位置：前，後
尺寸爲90mm，60毫米
顏色：紅色，藍色，白色
選項：Whitebg
評論：這是一個很酷的標誌。

數組是：

logos[logo[name, loc[], dim[], col[], opt[], com]]

現在我能做到這一點，以獲取一些信息：

logos[0][0] //Prints "Pepsi" 
logos[0][1][0] //Prints "Front" 
logos[0][2][1] //Prints "60mm"

現在問題來了。每當用戶完成所有信息並添加徽標時，我想清空除主要「徽標」之外的所有陣列，以便用戶可以將另一個徽標添加到列表中。

我試圖清空「標誌」排列在「添加」按鈕功能的結尾：

logo.length = 0;

但現在主陣列「標誌」包含一個「標誌」陣列女巫是空的。我想在那裏保存這些信息。

來源

2011-03-24 elclanrs

除了主打「邏各斯」一個......除非什麼？ – 2011-03-24 02:45:16

我在說明中更正了一些內容。 – elclanrs 2011-03-24 02:47:16

我想保留所有信息到主要的「標識」數組中，但每當用戶添加另一個標識時，我必須清空所有其他數組。 – elclanrs 2011-03-24 02:49:10

我想你可以看看這個不同。我想你應該只有一個主要的標誌陣列。和一個徽標對象。

Logo對象。

function Logo(name,loc, dim, col, opt, com){ 
    return { 
     name:name, 
     loc:loc, 
     dim:dim, 
     col:col, 
     opt:opt, 
     com:com 
    } 


} 


var logos = []; 
logos.push(Logo("blah",somthing[],else[]....);

然後引用由：

logos[0].name; 
    logos[0].dimensions[0];

....

您可以添加其他...

logos.push(Logo("another",....));

另一種選擇

同樣的事情之前。

但不是Logos [] 使用Logos = {}對象。

您可以通過給定的輸入動態地添加屬性。

Logos["First"] = Logo(loc,dim,col,opt,com); 
Logos["Second"] = Logo(loc2,dim2,col2,opt2,com2);

如果用戶輸入他們想要的「First」標誌。

您可以左右使用

var firstlogo = Logos["first"]; 

firstlogo.loc[0] etc.

玩它，使用對象提供了一個更好地瞭解你所處理的數據，尤其當多維數組不「需要」

來源

2011-03-24 03:05:19 Bodman

這看起來像是一個更好的方法來做到這一點。我主要關心的是，我需要能夠知道用戶指定了多少個位置，因爲之後我必須在操作中使用該號碼。另外我需要知道基於索引的位置字符串。例如，loc [「Front」，「Left」]，n = 2，first location =「Front」 – elclanrs 2011-03-24 03:11:38

嗯，我不認爲我完全理解你的意思。你會從用戶檢索一個數組？數組看起來像loc [「Front」，「Left」]？ – Bodman 2011-03-24 03:17:39

感謝您的回答我正在嘗試使用對象而不是數組來玩不同的選項。數組讓我瘋狂，這更有意義......我會在這裏發佈結果，一旦我得到它的工作。 – elclanrs 2011-03-24 03:42:28

我認爲你要做到這一點：

var tempLogo = new Array(); 
tempLogo[0] = logos[0]; // or the logo you have choose 

// Clear the logo 
logos.clear(); 

// Set the logos with the tempLogo value 
logos = tempLogo;

來源

2011-03-24 02:47:32

最後我使用的對象而不是像「Bodman」建議的陣列。工作更好，更簡單。

HTML：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<title>Title</title> 
<meta charset="utf-8" /> 
<link href="css/reset.css" rel="stylesheet" type="text/css"/> 
<link href="css/master.css" rel="stylesheet" type="text/css" media="screen"/> 
</head> 
<body> 

    <form action="/" method="post" id="form"> 
     <p><label for="">Name:</label><input type="text" id="name"/></p> 
     <p><label for="">Location:</label><input type="checkbox" name="loc" value="Front"/> Front <input type="checkbox" name="loc" value="Back"/> Back <input type="checkbox" name="loc" value="Right"/> Right <input type="checkbox" name="loc" value="Left"/> Left</p> 
     <p><label for="">Dimensions:</label>H: <input type="text" size="4" id="dimH"/> W: <input type="text" size="4" id="dimW"/></p> 
     <p><label for="">Colors:</label><input type="text" size="4" id="col1" /> <input type="text" size="4" id="col2" /> <input type="text" size="4" id="col3" /> <input type="text" size="4" id="col4" /></p> 
     <p><label for="">Comments:</label><textarea id="com" cols="30" rows="2"></textarea></p> 
     <p><label for="">&nbsp;</label><input type="button" id="add" value="Add" /> <input type="button" id="del" value="Del" /></p> 
    </form> 
    <ul id="results"></ul> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> 
<script type="text/javascript" src="js/scripts.js"></script> 
</body> 
</html>

CSS：

body { padding: 50px; } 
p { margin: 10px 0; } 
label { float: left; width: 100px; } 
input { margin: 0 } 
ul input[type="checkbox"]{ float:left; } 
ul { list-style: none;} 
li { margin: 10px 0; } 
li div { margin-left: 20px; } 
h2 { font: bold 14px Arial; margin-bottom: 5px; }

的jQuery：

$(function(){ 

    function logo(name, loc){ 

     var locSize = loc.length; 

     return { 
      name: name, 
      loc: loc, 
      locSize: locSize 
     } 

    } 


    var logos = []; 

    $("#add").click(function(){ 
     var name = $("#name").val(); 
     var loc = []; 
     $("input[name='loc']:checked").each(function(){ 
      loc.push($(this).val()); 
     }); 

     logos.push(logo(name, loc)); 

     $("#results").children().remove(); 
     $.each(logos, function(n){ 
      $("#results").append("<li><input type='checkbox'/><div><h2>" + logos[n].name + "<h2/> Locations(" + logos[n].locSize + "): " + logos[n].loc.join(", ") + "<div/></li>"); 
     }); 
    }); 

    $("#del").click(function(){ 
     $("#results input[type='checkbox']:checked").each(function(){ 
      var index = $(this).closest("li").index(); 
      logos.splice(index, 1); 
      $(this).closest("li").remove(); 
     }); 
    });

來源

2011-03-24 04:28:41 elclanrs

Jquery多維數組

回答

Logo對象。

另一種選擇

相關問題