小编kni*_*ion的帖子

所以想象我有以下标记

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

以下款式 (SASS)

@mixin max-width($width) {
    @media screen and (max-width: $width) {
        @content;
    }
}

.container {
    display: flex;

    @include max-width(992px) {
        number: 4; //Hypothetical property that is supposed to control number per row
    }

    @include max-width(640px) {
        number: 2; //Hypothetical property that is supposed to control number per row
    }
}
.item {
    background-color: tomato;
    padding: 20px;
    margin-right: …

的jsfiddle

单击时button,您会看到:active为父级触发了伪类div.是否存在纯CSS(或某些JS库)的:active伪类方式而不是在button点击时切换？

我试过了z-index,position: absolute & fixed没有成功.

这是正确的语法:

let foo, bar;

这是不正确的

const foo, bar;

这是为什么？

有没有办法在一个地方声明一些常量,并在另一个地方定义它们？除了约束声明和定义.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px;
  grid-auto-rows: 60px;
  grid-gap: 15px;
}

.col {
  background-color: tomato;
}

<div class="grid">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

这将创建2行,第一行是100px高度,第二行是使用60px高度自动创建的.第二行中的2列具有1fr宽度.

这是否可以通过CSS Grid/Flexbox在第2行中水平居中2列？即每行有不同数量的列.

我试图在浏览器中为CSS Grid框架解决一个简单的用例.如果您使用Flexbox构建网格,这是非常有问题的.

但是我可以用CSS Grid实现吗？

这是我想要实现的CodePen演示.

在浏览器中运行(ES5 +)

var propCount = Object.keys(navigator).length;
console.log(propCount); // 0

如果你这样做的普通对象

let obj = {
    foo: 'bar',
    breaking: 'bad'
}

let propCount = Object.keys(obj).length;

console.log(propCount); // 2

为什么会这样？

对不起,如果它可能与另一个问题有关,比如什么时候Object.keys(obj)只计算它不包含的简单对象functions/arrays,但这是我第一次遇到它.

并想知道它的原因.

我见过这样的演示.

但它是关于创建一个新元素.

parent().append("<span>" + $input.attr('placeholder') + "</span>");

有没有办法让占位符的动画消失input event而不添加新元素？

$("input[placeholder]").each(function () {
    
    var $input = $(this);
    // wrap the input with a label
    $input.wrap("<label class='placeholder'>");
    // append a span to the label
    $input.parent().append("<span>" + $input.attr('placeholder') + "</span>");
    // and finally remove the placeholder attribute
    $input.attr('placeholder', '');
    
}).keyup(function () {
    
    var $input = $(this);
    // toogle hidden class on span, according to whether there is content or not
    if ($input.val() === "") {
        $input.next("span").removeClass("hidden");
    } else {
        $input.next("span").addClass("hidden"); …

JSFiddle链接

.thing {
	background-color: tomato;
	max-width: 300px;
	padding: 30px;
	display: flex;
	margin: 0 auto;
	flex-flow: column wrap;
}

.not-centered {
	max-width: 150px;
	background-color: #fefefe;
	margin: 0 auto;
}

<div class="thing">
	<div class="not-centered">
		im not centeredi in ie11
	</div>
</div>

我认为它起作用,因为如果max-width和margin: 0 auto设置.但正如你所看到的那样,它不是水平居中的,因为他的父母.thing有flex-flow: column wrap.

有什么想法在这个设置中解决这个问题？

PS适用于Chrome/FF

let selected = [
  {id: 15, name: 'Canada'},
  {id: 25, name: 'Germany'}
];

let all = [
  {id: 15, name: 'Canada'},
  {id: 25, name: 'Germany'},
  {id: 32, name: 'United States'},
  {id: 40, name: 'China'}
]

如何从all对象中获取未选定的国家并将其打印在另一个变量中？基于数组id中的键selected？

const cars = [
  {
    'id': 'truck',
    'defaultCategory': 'vehicle'
  }
]

const output = []

Object.keys(cars).map((car) => {
  output.push({
      foo: cars[car].defaultCategory
  })
})

console.log(output)

这工作正常,但我想要实现的是新的crated对象具有的结构'truck': 'vehicle'.

所以,如果我用...替换push参数

${cars[car].id}`: cars[car].defaultCategory

我明白了 SyntaxError: Unexpected template string

我究竟做错了什么？

使用jQuery,我试图将每个button元素的HTML 包装成div.

jsfiddle链接

jQuery的

$('button').each(function(){
    var markup = $(this).html();
    console.log(markup);


    //This doesn't work
    //markup.each(function(){
    //  $(this).wrap('<div></div');
    //})

    //This doesn't work either
    //markup.wrap('<div></div>');
});

我得到TypeError: markup.wrap is not a function了最后一次没有工作的尝试和类似于第一次的事情

我的最终目标是:在a中包装每个按钮的内容(它也可以包括JSFiddle中显示的标签)div

有任何想法吗？