Question

我创建了一个多层数组，其中包含JSON格式的对象，以便用户更改背景图像以自定义创建角色。这是主要的脚本：

var newHead;
var newBody;
var newArm;

var masterList = [
    {
    {"creatureName":"Snowman"},
    {"part":
        [
        {"partName":"head", "urlLocation": "'snowman/head.png'"},
        {"partName":"body", "urlLocation": "'snowman/body.png'"},
        {"partName":"arms", "urlLocation": "'snowman/arm.png'"}
        ]
    }
    },
    {
    {"creatureName":"Robot"},
    {"part":
        [
        {"partName":"head", "urlLocation": "'robot/head.png'"},
        {"partName":"body", "urlLocation": "'robot/body.png'"},
        {"partName":"arms", "urlLocation": "'robot/arm.png'"}
        ]
    }
    },
    {
    {"creatureName":"Alien"},
    {"part":
        [
        {"partName":"head", "urlLocation": "'alien/head.png'"},
        {"partName":"body", "urlLocation": "'alien/body.png'"},
        {"partName":"arms", "urlLocation": "'alien/arm.png'"}
        ]
    }
    }
];

$(window).ready(matchHeight);
$(window).resize(matchHeight);

function matchHeight()
{
    var div = $('#charImg');
    var width = div.width();

    div.css('height', width);
}

function createOptions(x) {

}

function changeHead(x) {
    newHead = masterList[x].part[0].urlLocation;
    $('#charImg').css("background","url('')");
    $('#charImg').css("background","url("+newHead+"),url("+newBody+"),url("+newArm+")");
    $('#charImg').css("background-position","center center");
    $('#charImg').css("background-repeat","no-repeat");
    $('#charImg').css("background-size","100%","100%");
}

function changeBody(x) {
    newBody = masterList[x].part[1].urlLocation;
    $('#charImg').css("background","url('')");
    $('#charImg').css("background","url("+newHead+"),url("+newBody+"),url("+newArm+")");
    $('#charImg').css("background-position","center center");
    $('#charImg').css("background-repeat","no-repeat");
    $('#charImg').css("background-size","100%","100%");
}

function changeArm(x) {
    newArm = masterList[x].part[2].urlLocation;
    $('#charImg').css("background","url('')");
    $('#charImg').css("background","url("+newHead+"),url("+newBody+"),url("+newArm+")");
    $('#charImg').css("background-position","center center");
    $('#charImg').css("background-repeat","no-repeat");
    $('#charImg').css("background-size","100%","100%");
}

function randomize () {
    alert (masterList.length);
    newArm = armChoice[x].urlLocation;
    $('#charImg').css("background","url('')");
    $('#charImg').css("background","url("+newHead+"),url("+newBody+"),url("+newArm+")");
    $('#charImg').css("background-position","center center");
    $('#charImg').css("background-repeat","no-repeat");
    $('#charImg').css("background-size","100%","100%");
}

$(document).ready(function(){
    newHead = masterList[0].part[0].urlLocation;
    newBody = masterList[0].part[1].urlLocation;
    newArm = masterList[0].part[2].urlLocation;
});

这是html文件：

<html>

<head>
<title>Character Creation</title>
<link rel="stylesheet" type="text/css" href="main.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="mainScript.js"></script>
</head>

<body>
<h1>Avatar Creation</h1>
<div id="charImg"></div>
<div id="choiceBoxOverall">
<h2>Customize your character</h2>
<h3>Head</h3>
<span class="choiceBox" onclick="changeHead (0)">Snowman</span>
<span class="choiceBox" onclick="changeHead (1)">Robot</span>
<span class="choiceBox" onclick="changeHead (2)">Alien</span>
<h3>Body and Legs</h3>
<span class="choiceBox" onclick="changeBody (0)">Snowman</span>
<span class="choiceBox" onclick="changeBody (1)">Robot</span>
<span class="choiceBox" onclick="changeBody (2)">Alien</span>
<h3>Arms</h3>
<span class="choiceBox" onclick="changeArm (0)">Snowman</span>
<span class="choiceBox" onclick="changeArm (1)">Robot</span>
<span class="choiceBox" onclick="changeArm (2)">Alien</span>
</div>

<span id="randomBox" onclick="randomize()">Randomize</span>

</body>

</html>

我做错了什么？

谢谢！ supra411

Answer 1

您的对象语法错误。您不会在对象的每个元素周围包裹{ ... }。

var masterList = [
    {"creatureName":"Snowman",
     "part": [
         {"partName":"head", "urlLocation": "'snowman/head.png'"},
         {"partName":"body", "urlLocation": "'snowman/body.png'"},
         {"partName":"arms", "urlLocation": "'snowman/arm.png'"}
     ]
    },
    {"creatureName":"Robot",
     "part": [
         {"partName":"head", "urlLocation": "'robot/head.png'"},
         {"partName":"body", "urlLocation": "'robot/body.png'"},
         {"partName":"arms", "urlLocation": "'robot/arm.png'"}
     ]
    },
    {"creatureName":"Alien",
     "part": [
         {"partName":"head", "urlLocation": "'alien/head.png'"},
         {"partName":"body", "urlLocation": "'alien/body.png'"},
         {"partName":"arms", "urlLocation": "'alien/arm.png'"}
     ]
    }
];

带有JSON对象的多层数组问题

1 个答案: