小编LGS*_*Son的帖子

如何阅读多级json

所以,我知道如何阅读"单级"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数据.

我该怎么办呢?

javascript json

0
推荐指数
1
解决办法
1484
查看次数

计算数组中的对象?

我有这样一个数组:

[{"this":"that","int":5},{"this":"that","int":5}]
Run Code Online (Sandbox Code Playgroud)

如何使用Javascript计算数组内的对象({})的数量?

提前致谢.

javascript arrays object count

0
推荐指数
1
解决办法
8361
查看次数

如果以flexitem输入,Flex框会忽略宽度

好像我没理解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)

html css input css3 flexbox

0
推荐指数
1
解决办法
1231
查看次数

CSS 计算的宽度与指定的宽度不同

如本所示,为预览按钮指定的宽度为 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)

html css flexbox

0
推荐指数
1
解决办法
4683
查看次数

display:flex显示带下划线的图标

如果我在导航栏中对齐我的图标display: flex,则会在我的图标下方显示下划线.如果我禁用它,它们会消失,但我的图标没有正确对齐.见下图.

我怎么能摆脱他们?

没有显示:flex < - > 带显示屏: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)

html css css3 flexbox

0
推荐指数
2
解决办法
988
查看次数

可滚动侧栏中的Flexbox粘贴页脚

我有一个带有页脚的移动侧边栏,该页脚应固定在底部,但是当导航链接很多时,页脚将被向下推,您必须滚动才能看到它。

这是一个简化的演示,显示侧边栏已经扩展了内容。您会看到页脚粘在侧边栏的底部,而没有被多余的链接推下,滚动时它仍与链接重叠。

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)

html css css3 flexbox

0
推荐指数
1
解决办法
58
查看次数

标签 统计

css ×4

flexbox ×4

html ×4

css3 ×3

javascript ×2

arrays ×1

count ×1

input ×1

json ×1

object ×1