Question

您好我正在尝试制作一个程序，它显示对象的不同键，并根据您想要的键进入对象。

我现在拥有的是一个读取对象键并使用这些键作为值的按钮的函数。我想要的是人们能够按下按钮，然后看到他们按下的按键中可用的按键。（因为它是一个分层的对象）

这是我的HTML：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Root folder</title>
    <link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>

    <div id="buttons"></div>    

<script src="js/init.js" type="text/javascript"></script>
</body>
</html>

这是我的对象：

var vloer = {
"Linoleum": {
    "Licht vervuild": {
        "Eenschijf > 350": {
            "Reinigen": {
                "value": 1
            },
            "Strippen": {
                "value": 2
            },
            "Glans": {
                "value": 3
            },
            "Hoogglans": {
                "value": 4
            }
        },
        "Eenschijfs boost": {
            "Reinigen": {
                "value": 5
            },
            "Strippen": {
                "value": 6
            },
            "Glans": {
                "value": 7
            },
            "Hoogglans": {
                "value": 8
            }
        },
        "Schrobzuig": {
            "Reinigen": {
                "value": 9
            },
            "Strippen": {
                "value": 10
            },
            "Glans": {
                "value": 11
            },
            "Hoogglans": {
                "value": 12
            }
        },
        "Schrobzuig boost": {
            "Reinigen": {
                "value": 13
            },
            "Strippen": {
                "value": 14
            },
            "Glans": {
                "value": 15
            },
            "Hoogglans": {
                "value": 16
            }
        }
    },
    "Zwaar vervuild": {
        "Eenschijf > 350": {
            "Reinigen": {
                "value": 17
            },
            "Strippen": {
                "value": 18
            },
            "Glans": {
                "value": 19
            },
            "Hoogglans": {
                "value": 20
            }
        },
        "Eenschijfs boost": {
            "Reinigen": {
                "value": 21
            },
            "Strippen": {
                "value": 22
            },
            "Glans": {
                "value": 23
            },
            "Hoogglans": {
                "value": 24
            }
        },
        "Schrobzuig": {
            "Reinigen": {
                "value": 25
            },
            "Strippen": {
                "value": 26
            },
            "Glans": {
                "value": 27
            },
            "Hoogglans": {
                "value": 28
            }
        },
        "Schrobzuig boost": {
            "Reinigen": {
                "value": 29
            },
            "Strippen": {
                "value": 30
            },
            "Glans": {
                "value": 31
            },
            "Hoogglans": {
                "value": 32
            }
        }
    },
    "Schoon": {
        "Eenschijf > 350": {
            "Reinigen": {
                "value": 33
            },
            "Strippen": {
                "value": 34
            },
            "Glans": {
                "value": 35
            },
            "Hoogglans": {
                "value": 36
            }
        },
        "Eenschijfs boost": {
            "Reinigen": {
                "value": 37
            },
            "Strippen": {
                "value": 38
            },
            "Glans": {
                "value": 39
            },
            "Hoogglans": {
                "value": 40
            }
        },
        "Schrobzuig": {
            "Reinigen": {
                "value": 41
            },
            "Strippen": {
                "value": 42
            },
            "Glans": {
                "value": 43
            },
            "Hoogglans": {
                "value": 44
            }
        },
        "Schrobzuig boost": {
            "Reinigen": {
                "value": 45
            },
            "Strippen": {
                "value": 46
            },
            "Glans": {
                "value": 47
            },
            "Hoogglans": {
                "value": 48
            }
        }
    }
},
"PVC": {
    "Licht vervuild": {
        "Eenschijf > 350": {
            "Reinigen": {
                "value": 1
            },
            "Strippen": {
                "value": 2
            },
            "Glans": {
                "value": 3
            },
            "Hoogglans": {
                "value": 4
            }
        },
        "Eenschijfs boost": {
            "Reinigen": {
                "value": 5
            },
            "Strippen": {
                "value": 6
            },
            "Glans": {
                "value": 7
            },
            "Hoogglans": {
                "value": 8
            }
        },
        "Schrobzuig": {
            "Reinigen": {
                "value": 9
            },
            "Strippen": {
                "value": 10
            },
            "Glans": {
                "value": 11
            },
            "Hoogglans": {
                "value": 12
            }
        },
        "Schrobzuig boost": {
            "Reinigen": {
                "value": 13
            },
            "Strippen": {
                "value": 14
            },
            "Glans": {
                "value": 15
            },
            "Hoogglans": {
                "value": 16
            }
        }
    },
    "Zwaar vervuild": {
        "Eenschijf > 350": {
            "Reinigen": {
                "value": 17
            },
            "Strippen": {
                "value": 18
            },
            "Glans": {
                "value": 19
            },
            "Hoogglans": {
                "value": 20
            }
        },
        "Eenschijfs boost": {
            "Reinigen": {
                "value": 21
            },
            "Strippen": {
                "value": 22
            },
            "Glans": {
                "value": 23
            },
            "Hoogglans": {
                "value": 24
            }
        },
        "Schrobzuig": {
            "Reinigen": {
                "value": 25
            },
            "Strippen": {
                "value": 26
            },
            "Glans": {
                "value": 27
            },
            "Hoogglans": {
                "value": 28
            }
        },
        "Schrobzuig boost": {
            "Reinigen": {
                "value": 29
            },
            "Strippen": {
                "value": 30
            },
            "Glans": {
                "value": 31
            },
            "Hoogglans": {
                "value": 32
            }
        }
    },
    "Schoon": {
        "Eenschijf > 350": {
            "Reinigen": {
                "value": 33
            },
            "Strippen": {
                "value": 34
            },
            "Glans": {
                "value": 35
            },
            "Hoogglans": {
                "value": 36
            }
        },
        "Eenschijfs boost": {
            "Reinigen": {
                "value": 37
            },
            "Strippen": {
                "value": 38
            },
            "Glans": {
                "value": 39
            },
            "Hoogglans": {
                "value": 40
            }
        },
        "Schrobzuig": {
            "Reinigen": {
                "value": 41
            },
            "Strippen": {
                "value": 42
            },
            "Glans": {
                "value": 43
            },
            "Hoogglans": {
                "value": 44
            }
        },
        "Schrobzuig boost": {
            "Reinigen": {
                "value": 45
            },
            "Strippen": {
                "value": 46
            },
            "Glans": {
                "value": 47
            },
            "Hoogglans": {
                "value": 48
            }
        }
    }
}
};

这是我的Javascript：

var div = document.getElementById("buttons"),
path = vloer;

function floorApp(key) {

    while(div.firstChild) {
        div.removeChild(div.firstChild);
    }

    if(key !== vloer){
        return path = path + "." + key;   
    }

    console.log(path.Linoleum)

    var keys = Object.keys(path);

    for (var i=0; i<keys.length; i++) {

        var btn = document.createElement("button");
        btn.setAttribute("class", "btn");
        btn.setAttribute("onclick", "floorApp(" + keys[i] + ")");
        btn.innerHTML = keys[i];  

        div.appendChild(btn);
    }
}

但是，此代码始终会导致以下错误：未捕获的ReferenceError：未定义亚麻油地毡

或者它给了一个[object Object]油毡，它不会给我vloer [＆＃34;油毡＆＃34;]中的钥匙，而是1~22号的数字。

非常感谢任何帮助我的人！

以下是我的问题的答案，每个人都遇到了和我一样的问题：

var div = document.getElementById("buttons"),
path = vloer;

function floorApp(key) {

    console.log(path, key);

    while(div.firstChild) {
        div.removeChild(div.firstChild);
    }

    if(key !== vloer){
        path = path[key];
        console.log(path);
    }

    var keys = Object.keys(path);

    for (var i=0; i<keys.length; i++) {

        var btn = document.createElement("button");
        btn.setAttribute("class", "btn");
        btn.setAttribute("onclick", "floorApp(" + JSON.stringify(keys[i]) + ")");
        btn.innerHTML = keys[i];  

        div.appendChild(btn);
    }
}

floorApp(vloer);

Answer 1

将return path = path + "." + key;变为return path = path.key;或return path = path[key];

第一个是字符串连接，但path是一个Object，你应该有一个toString。无论如何，这不是你想要的。第二个和第三个正确访问父对象的属性（如果它存在）（否则它们返回undefined）。

javascript路径+＆＃34;。＆＃34; +键不起作用

1 个答案: