Jquery multidimensional arrays

前端未结

关注

 3  477

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 log

相关标签:

3条回答

萌比男神i

2021-01-03 13:52

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;

0 讨论(0)

闹比i

2021-01-03 14:06
I think you could look at this differently. I think you should just have a main logos array. And a Logo Object.

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.

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"
0 讨论(0)
发布评论:

提交评论
- 加载中...

广开言路

2021-01-03 14:11

Finally I used objects instead of arrays as "Bodman" suggested. Works much better and is simpler.

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();
        });
    });

0 讨论(0)

Jquery multidimensional arrays

The Logo Object.

Another Option