我使用基于模块化CSS原则的Sass框架，它输出每个Sass＆＃34;模块的所有变量和配置。在我的JS中成功检索到的DOM中的JSON格式。我的JSON采用以下格式：
{
"billboard":{
"selector-type":"flex",
"extend-settings":true,
"name":"billboard",
"full-screen":false,
"overlay":true,
"bg-color":"#232627",
"bg-image":"../../images/billboard-1.jpg",
"overlay-color":"#9B58B5",
"overlay-opacity":0.6,
"color":"#ffffff",
"text-align":"center",
"min-height":"500px",
"wrapper-width":"940px"
},
"navigation":{
"selector-type":"flex",
"extend-settings":true,
"name":"navigation",
"item-color":"#ffffff",
"item-bg":"transparent",
"item-border":[
"1px",
"solid",
"transparent"
],
"item-hover-color":null,
"item-hover-bg":"transparent",
"item-hover-border":[
"1px",
"solid",
"#ffffff"
]
"header-dark":{
"default":false,
"item-color":"#6f777b",
"item-border":[
"1px",
"solid",
"#ffffff"
],
"item-bg-color":"transparent",
"item-hover-color":null,
"item-hover-border":[
"1px",
"solid",
"#ffffff"
],
"item-hover-bg-color":"#9B58B5"
},
"style":false,
"no-icons":true,
"link-color":"#ffffff"
}
}
每个第一级设置将始终是Sass＆＃34;模块＆＃34; （，例如，＆＃34; header＆＃34;），它将包含模块的配置，可以是任何深度。
我想写一个函数来检索我指定的键的值。由于并非所有密钥都是唯一的，并且模块名称中唯一保证唯一性，我的要求是能够通过指定父项来选择值。
这是我到目前为止所拥有的，＆＃34; stylesConfig＆＃34;是我的JSON数据数组：
function module(module, option) {
var mValue;
$.each(stylesConfig, function(id, param) {
if(id == module) {
$.each(param, function(key, value) {
if (key == option) {
mValue = value;
return false;
}
});
}
});
return mValue;
}
这完美地使用：
module("navigation", "selector-type");
将返回＆＃34; flex＆＃34;使用上面的JSON示例。问题是它不能递归地工作，所以不能处理嵌套选项。我希望能够扩展我已经拥有的能够做的事情：
module("navigation", ["header-dark", "item-color"]);
返回＆＃34;＃6f777b＆＃34;。
来自设计背景，我坦率地不知道我在做什么。我的编程能力仅限于我使用Sass学到的东西。
答案 0 :(得分：2)
如果你的功能写得正确，你可以这样做：
var headerDark = module("navigation", "header-dark");
var itemColor = headerDark["item-color"];
但是你不需要它看起来那样的功能，只需将JSON存储在变量中并按键名访问对象，它们就是孩子。
像这样...
yourJSONObject.navigation["header-dark"]["item-color"];
答案 1 :(得分：0)
这是一种方法
var stylesConfig = {
"billboard": {
"selector-type": "flex",
...
function module(module, option) {
// array
if (option instanceof Array)
{
var i = stylesConfig[module];
// recursively navigate stylesConfig using the array elements
option.forEach(function (e) {
i = i[e];
})
return i;
}
// string
else
{
return stylesConfig[module][option];
}
}
console.log(module("navigation", "selector-type")); // flex
console.log(module("navigation", ["header-dark", "item-color"])); // #6f777b
答案 2 :(得分：0)
您正在遍历整个json树以找出您需要的值。你有键所以你不需要遍历整棵树。
{
"billboard":{
"selector-type":"flex",
"extend-settings":true,
"name":"billboard",
"full-screen":false,
"overlay":true,
"bg-color":"#232627",
"bg-image":"../../images/billboard-1.jpg",
"overlay-color":"#9B58B5",
"overlay-opacity":0.6,
"color":"#ffffff",
"text-align":"center",
"min-height":"500px",
"wrapper-width":"940px"
},
"navigation":{
"selector-type":"flex",
"extend-settings":true,
"name":"navigation",
"item-color":"#ffffff",
"item-bg":"transparent",
"item-border":[
"1px",
"solid",
"transparent"
],
"item-hover-color":null,
"item-hover-bg":"transparent",
"item-hover-border":[
"1px",
"solid",
"#ffffff"
]
"header-dark":{
"default":false,
"item-color":"#6f777b",
"item-border":[
"1px",
"solid",
"#ffffff"
],
"item-bg-color":"transparent",
"item-hover-color":null,
"item-hover-border":[
"1px",
"solid",
"#ffffff"
],
"item-hover-bg-color":"#9B58B5"
},
"style":false,
"no-icons":true,
"link-color":"#ffffff"
}
};
return a['navigation']['selector-type'];// gives you 'flex'
我假设你能够将这个json放在某种形式的变量中，然后就像正常的数组遍历一样
答案 3 :(得分：0)
如果要通过JSON对象递归搜索，递归函数是一种很好的方法：
function find(json, parents, index) {
if (parents === undefined) {
return undefined;
}
if (index === undefined) {
index = 0;
}
if (index == parents.length - 1) {
return json[parents[index]];
}
return find(json[parents[index]], parents, index + 1);
}
var styles = {
"billboard":{
"selector-type":"flex",
"extend-settings":true,
"name":"billboard",
"full-screen":false,
"overlay":true,
"bg-color":"#232627",
"bg-image":"../../images/billboard-1.jpg",
"overlay-color":"#9B58B5",
"overlay-opacity":0.6,
"color":"#ffffff",
"text-align":"center",
"min-height":"500px",
"wrapper-width":"940px"
},
"navigation":{
"selector-type":"flex",
"extend-settings":true,
"name":"navigation",
"item-color":"#ffffff",
"item-bg":"transparent",
"item-border":[
"1px",
"solid",
"transparent"
],
"item-hover-color":null,
"item-hover-bg":"transparent",
"item-hover-border":[
"1px",
"solid",
"#ffffff"
],
"header-dark":{
"default":false,
"item-color":"#6f777b",
"item-border":[
"1px",
"solid",
"#ffffff"
],
"item-bg-color":"transparent",
"item-hover-color":null,
"item-hover-border":[
"1px",
"solid",
"#ffffff"
],
"item-hover-bg-color":"#9B58B5"
},
"style":false,
"no-icons":true,
"link-color":"#ffffff"
}
};
function print(s) {
document.write(s + '<br />');
}
print(find(styles, ['navigation', 'selector-type']));
print(find(styles, ['navigation', 'header-dark', 'item-color']));