小编hac*_*kel的帖子

创建一个按列流动的 CSS 网格,具有基于内容的动态列和行

我有一个动态数量的元素(所有相同的维度)。我想将它们放置在网格中,以便它们按列排序,列数基于可用容器宽度,行数基于元素数。

例如,假设有 9 个元素:

1 4 7
2 5 8
3 6 9
Run Code Online (Sandbox Code Playgroud)

但是如果容器宽度扩大:

1 3 5 7 9
2 4 6 8
Run Code Online (Sandbox Code Playgroud)

或收缩:

1 6
2 7
3 8
4 9
5
Run Code Online (Sandbox Code Playgroud)

当项目按行而不是按列定位时,这可以正常工作。此外,如果我明确设置行数,它工作正常,但如果我对行和列使用自动填充,它只会在一行中显示所有内容。

这是我希望呈现为 3x3 网格的一个简单示例:https : //codepen.io/anon/pen/ZxPQNd

html css css-grid

10
推荐指数
2
解决办法
9462
查看次数

按Enter键,表单提交后,Google商家信息自动填充place_changed事件将触发

我已将Google Maps Javascript API V3中的google.maps.places.Autocomplete添加到基本搜索表单中.我试图找到一种可靠的方法来检测用户是否从自动完成列表中选择了一个项目(使用鼠标或键盘),或者是否正在提交自由格式文本.

代码:http://jsfiddle.net/2rhL3cyk/1/

我正在测试以下基本方案,每个方案都应该导致表单提交.locMatch如果用户选择了自动完成项,则应为true.

  1. 输入自由格式文本,点击回车:
    • place_changed已解雇
    • onSubmit被解雇了.locMatch:false
  2. 输入文字,使用向下箭头选择一个地点,然后按Enter键:
    • onSubmit被解雇了.locMatch:false
    • place_changed被解雇了(太晚了!)
  3. 输入文字,用鼠标选择一个地方,点击提交:
    • place_changed已解雇(点击后)
    • onSubmit被解雇了.locMatch:true(单击按钮后)
  4. 输入文字,用鼠标选择一个地方,将文字改为自由形态字符串,点击回车:
    • place_changed已解雇(点击后)
    • 触发了place_changed(输入新文本并点击后输入)
    • onSubmit被解雇了.locMatch:false
  5. 输入文字,用鼠标选择一个地方,将文字改为自由形式的字符串,点击提交:
    • place_changed已解雇(点击后)
    • onSubmit被解雇了.locMatch:true(输入新文本并单击按钮后)
  6. 输入文字,使用鼠标选择地点,输入新文字,使用向下箭头选择地点,然后按回车键
    • place_changed已解雇(点击后)
    • onSubmit被解雇了.locMatch:true(输入新文本并单击按钮后)
    • place_changed已解雇

只有情况1,3和4按预期工作.

在#2中,onSubmit在place_changed之前被触发,因此在提交表单之前它没有机会设置locMatch.手动触发place_changed没有帮助,因为即使输入字段具有正确的文本,autocomplete.getPlace()仍然是未定义的,直到表单提交触发为止.我能够强制它与一个可怕的setTimeout hack一起工作:

$('#loc_search').submit(function (e) {
  setTimeout(function () {
    console.log('submit for real! locMatch:', locMatch);
    $(this).submit();
  }, 150);
});
Run Code Online (Sandbox Code Playgroud)

我真的想找到一种更明智的方法来解决这个问题.我想超时值可能取决于用户的机器规格,我不希望任何不必要的延迟.

在#5中,在输入后它根本不会调用pl​​ace_changed.同样,我尝试在提交处理程序中手动触发place_changed事件,但这没有任何效果,因为getPlace()返回先前选择的值,即使用户在输入字段中输入了它.解决这个问题的一种方法是在更改时重置locMatches,但这会打破下面的#6.

$('#location').change(function() {
  locMatch = false;
});
Run Code Online (Sandbox Code Playgroud)

在#6中,locMatch从前一次点击仍然是正确的,因此它确实给出了预期的结果,但它在技术上并不正确,因为在表单提交后仍然会触发place_changed.针对#5的上述修复打破了这种情况,但上面的setTimeout方法再次修复了它.

我一整天都在拔头发,任何建议都会非常感激.谢谢!

javascript jquery autocomplete google-maps-api-3 google-places-api

8
推荐指数
1
解决办法
4495
查看次数

将数据从一个步骤同步传递到下一个步骤

使用 cypress-cucumber-preprocessor 1.5.1 运行 Cypress 3.1.1。我需要将一些静态数据从一个步骤传递到另一个步骤(在同一场景/测试中)。我可以使用别名来做到这一点,就像这样: cy.wrap(someString).as('myString'),但是我必须异步访问它:

cy.get('@myString').then(myString => ...)

这是相当麻烦的,特别是当我必须传递多个值时,需要多个包装的闭包,而没有明显的好处。(目前我正在通过为对象设置别名来解决这个问题,但我不需要这样做。)

如何将原始值从一个步骤同步传递到另一个步骤?

我以为我可以简单地设置this.myString=''为 Mocha 共享上下文对象上的值,但在这种情况下,该属性存在但在后续步骤中访问时设置为 undefined。

即使在步骤定义之外使用 let 创建我自己的上下文变量也不起作用。这仅仅是 Cypress 和/或 cypress-cucumber-preprocessor 的限制吗?

cucumberjs cypress

5
推荐指数
1
解决办法
4073
查看次数

如何断开正在运行的 Browsersync 实例的连接?

我经常想将新的更改与原始更改进行比较。为此,我打开同一页面的两个浏览器选项卡,进行更改,然后重新加载其中一个选项卡进行比较。启用 Browsersync 后,这将变得不可能,因为两个选项卡都会自动重新加载。

如何禁用特定选项卡的 Browsersync 以防止发生这种情况?我正在寻找一种从 Javascript 控制台执行此操作的方法,而不必停止/重新加载我的观察者。

Browsersync API 有一个 pause() 方法,但我看不到从实际运行的 Browsersync 实例访问它的方法。有一个window.___browserSync___可访问的对象,因此必须有某种方法来实现这一点。

browser-sync

4
推荐指数
1
解决办法
546
查看次数

在闭包中初始化父作用域变量

为了从闭包内初始化父作用域中的变量,我可以这样做:

$f = function () use (&$a) {
  $a = 1;
};
$f();
$a === 1; // true
Run Code Online (Sandbox Code Playgroud)

我的问题是,这是副作用还是我将来可以依赖的预期行为?我知道我可以$a = null在定义闭包之前简单地添加,但是如果有很多变量,这可能会变得很难看。

php

2
推荐指数
1
解决办法
60
查看次数