Javascript Jquery 多维数组
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5414133/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery multidimensional arrays
提问by elclanrs
I'm making an application where the user fills out all the information for a logo and adds it to a list where he can then add more logos or delete them. Imagine I add a logo to the list with the following information:
我正在制作一个应用程序，其中用户填写徽标的所有信息并将其添加到列表中，然后他可以添加更多徽标或删除它们。想象一下，我向列表中添加了一个徽标，其中包含以下信息：
Name: Pepsi
Location: Front, Back
Dimensions: 90mm, 60mm
Colors: Red, Blue, White
Options: Whitebg
Comment: This is a cool logo.
名称：百事可乐
位置：正面、背面
尺寸：90mm、60mm
颜色：红色、蓝色、白色
选项：Whitebg
评论：这是一个很酷的标志。
The array would be:
该数组将是：
logos[logo[name, loc[], dim[], col[], opt[], com]]
Now I can do this to retrieve some info:
现在我可以这样做来检索一些信息：
logos[0][0] //Prints "Pepsi"
logos[0][1][0] //Prints "Front"
logos[0][2][1] //Prints "60mm"
Now comes the problem. Whenever the user completes all the info and adds the logo the list I want to empty all the arrays except the main "logos" one so the user can add another logo to the list.
现在问题来了。每当用户完成所有信息并将徽标添加到列表中时，我想清空除主要“徽标”数组之外的所有数组，以便用户可以将另一个徽标添加到列表中。
I tried to empty the "logo" array at the end of the "add" button function:
我试图清空“添加”按钮功能末尾的“徽标”数组：
logo.length = 0;
But now the main array "logos" contains one "logo" array witch is empty. I want to keep that information there.
但是现在主数组“logos”包含一个“logo”数组女巫是空的。我想把这些信息保留在那里。
回答by Bodman
I think you could look at this differently. I think you should just have a main logos array. And a Logo Object.
我想你可以从不同的角度看待这个问题。我认为你应该只有一个主要的 logos 数组。和一个标志对象。
The Logo Object.
标志对象。
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[]....);
Then reference by:
然后参考：
logos[0].name;
logos[0].dimensions[0];
....
....
you can add another...
你可以添加另一个...
logos.push(Logo("another",....));
Another Option
另外一个选项
Same thing as before.
和以前一样。
But instead of a Logos[] Use a Logos = {} object.
但不是 Logos[] 使用 Logos = {} 对象。
You can dynamically add properties by given input like this.
您可以通过这样的给定输入动态添加属性。
Logos["First"] = Logo(loc,dim,col,opt,com);
Logos["Second"] = Logo(loc2,dim2,col2,opt2,com2);
If the user inputs that they want the "First" logo.
如果用户输入他们想要“第一个”标志。
You can use
您可以使用
var firstlogo = Logos["first"];
firstlogo.loc[0] etc.
Play around with it, using objects provides a better understanding of the data you are dealing with, esp when multidimensional arrays are not "required"
玩玩它，使用对象可以更好地理解您正在处理的数据，尤其是在“不需要”多维数组时
回答by Patrick Perron
I think you want do this :
我想你想这样做：
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;
回答by elclanrs
Finally I used objects instead of arrays as "Bodman" suggested. Works much better and is simpler.
最后，我按照“Bodman”的建议使用了对象而不是数组。效果更好，更简单。
HTML:
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=""> </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:
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:
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();
});
});
