Jquery 多维数组答案

【问题标题】：Jquery multidimensional arraysJquery 多维数组
【发布时间】：2011-03-24 02:34:29
【问题描述】：

我正在制作一个应用程序，用户填写徽标的所有信息并将其添加到列表中，然后他可以添加更多徽标或删除它们。想象一下，我在列表中添加了一个带有以下信息的徽标：

名称：百事可乐
位置：前、后
尺寸：90mm、60mm
颜色：红色、蓝色、白色
选项：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”数组：

logo.length = 0;

但现在主数组“logos”包含一个“logo”数组，女巫是空的。我想把这些信息保留在那里。

【问题讨论】：

除了主要的“标志”之一......除了什么？
我更正了描述中的一些内容。
我想将所有信息保存到主“logos”数组中，但每当用户添加另一个徽标时，我必须清空所有其他数组。
所有其他数组....还有哪些其他数组？
点击“添加”并将当前标志添加到列表后，“logos”数组有1个项目（logos[logo[]]），“logo”数组包含所有您刚刚添加的徽标的选项应在添加到“徽标”数组后清空，以便您可以添加另一个徽标。这很难解释。让我做一个简单的例子。一会儿我发过来

标签： javascript jquery arrays

【解决方案1】：

我认为您可以以不同的方式看待这个问题。我认为您应该只拥有一个主徽标数组。还有一个 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.

玩弄它，使用对象可以更好地理解您正在处理的数据，尤其是当多维数组不是“必需的”时

【讨论】：

这看起来是一种更好的方法。我主要担心的是我需要能够知道用户指定了多少个位置，因为稍后我必须在操作中使用该数字。另外我需要知道基于索引的位置字符串。例如 loc["Front", "Left"], n = 2, first location = "Front"
嗯我不认为我完全理解你的意思。您将从用户那里检索一个数组？数组看起来像 loc["Front","Left"] 吗？
感谢您的回答我正在尝试使用对象而不是数组的不同选项。数组让我发疯，这更有意义......一旦我得到它的工作，我会在这里发布结果。
有效！现在我只需要弄清楚更多的事情，但基础工作，它比数组简单得多。
太好了！你现在正在体验 javascript 的最佳部分。

【解决方案2】：

我想你想这样做：

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;

【讨论】：

【解决方案3】：

最后，我使用了“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();
        });
    });

【讨论】：