所以,我知道如何阅读"单级"json数组.但是,我无法弄清楚如何从多级json数组索引我想要的值.
我有这个JSON数据:
{
"items": [
{
"snippet": {
"title": "YouTube Developers Live: Embedded Web Player Customization"
}
}
]
}
Run Code Online (Sandbox Code Playgroud)
我想访问title的值,但是这些都不能访问值,而是返回undefined:
console.log(data["items"][0].title);
要么:
console.log(data["items"][0]["title"]);
但是,此代码返回snippet
对象:
console.log(data["items"][0]);
的data
变量是指JSON数据.
我该怎么办呢?
我有这样一个数组:
[{"this":"that","int":5},{"this":"that","int":5}]
Run Code Online (Sandbox Code Playgroud)
如何使用Javascript计算数组内的对象({})的数量?
提前致谢.
好像我没理解flexbox吧.
但我认为flexboxitem中div的含义被忽略了.
喜欢这个小提琴:https://jsfiddle.net/34f9awsk/6/
CSS:
.wrapper {
width: 200px;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
flex-direction: row;
}
.ele {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
flex-direction: row;
flex: 3;
}
.ele1 {
flex: 1;
}
.ele input {
display: inline;
max-width: 100%;
}
Run Code Online (Sandbox Code Playgroud)
HTML:
<div class="wrapper">
<div class="ele ele3" style="background-color: red;">
<input type="number" size="4" value="9999" />
</div>
<div class="ele ele1" style="background-color: green;">
2
</div>
<div …
Run Code Online (Sandbox Code Playgroud) 如本箱所示,为预览按钮指定的宽度为 120 px,而渲染宽度始终为 132 px(在不同屏幕上)。
.btn-grey{
cursor: pointer;
background: #f1f3f6;
border: 1px solid #d7d9e1;
box-shadow: 1px 1px 1px #fff inset;
border-radius: 3px;
color: #838AAB;
display: inline-block;
height: 30px;
padding: 0 5px;
}
Run Code Online (Sandbox Code Playgroud)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div style="display: flex; width: 60%; justify-content: center;">
<input name="preview" class="btn-grey" value="Preview" style="flex-basis: 120px; width: 120px; height: 35px;max-width: 120px; max-height: 35px; margin : 5px 5px 5px 5px " title="preview"/>
<input name="load" class="btn-grey" type="submit" value="Load …
Run Code Online (Sandbox Code Playgroud)如果我在导航栏中对齐我的图标display: flex
,则会在我的图标下方显示下划线.如果我禁用它,它们会消失,但我的图标没有正确对齐.见下图.
我怎么能摆脱他们?
这是代码:
.nav {
width: 60px;
height: 100vh;
top: 100px;
min-height: 100vh;
background-color: #cccccc;
position: fixed;
z-index: 999;
opacity: .4;
border-right: 1px solid black;
display: flex;
flex-direction: column;
}
.nav a {
width: 100%;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
border: none;
}
Run Code Online (Sandbox Code Playgroud)
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="nav">
<a href=""><i class="material-icons">home</i></a>
<a href=""><i class="material-icons">shopping_basket</i></a>
<a href=""><i class="material-icons">business</i></a>
<a href=""><i class="material-icons">mail</i></a>
<a href=""><i class="material-icons">card_giftcard</i></a>
</div>
Run Code Online (Sandbox Code Playgroud)
我有一个带有页脚的移动侧边栏,该页脚应固定在底部,但是当导航链接很多时,页脚将被向下推,您必须滚动才能看到它。
这是一个简化的演示,显示侧边栏已经扩展了内容。您会看到页脚粘在侧边栏的底部,而没有被多余的链接推下,滚动时它仍与链接重叠。
body {background: #CCC;}
#side-menu {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 200px;
background: #FFF;
box-shadow: 0 0 20px #000;
display: flex;
flex-direction: column;
overflow: auto;
height: 100vh;
}
#side-menu-header,
#side-menu-footer {
flex-shrink: 0;
background-color: skyblue;
padding: 0.5rem;
}
#side-menu-nav {
flex-grow: 1;
display: flex;
flex-direction: column;
}
#side-menu-nav a {
padding: 0.5rem;
}
Run Code Online (Sandbox Code Playgroud)
<aside id="side-menu">
<header id="side-menu-header">
Logo
</header>
<nav id="side-menu-nav">
<a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a> …
Run Code Online (Sandbox Code Playgroud)