2019独角兽企业重金招聘Python工程师标准>>>
1. HTML与js元素不匹配导致的问题。
今天遇到一个问题,是需要给 datepicker 控件赋值。常规的赋值方法是
$('#createBirthdayInput').datepicker('setDate', '2018-09-18');
但是无论怎么样页面上都不起效果。
我最开始的想法是觉得可能这种赋值方法在这里不起作用。想改成另外的赋值方法。但是网上浏览了一圈,也没有发现有什么差异性的方法。顶多就是再赋值之前,对时间格式化了一下,但是不是直接导致不起作用。并且前端元素调试发现也确实获取到元素了。但就是不知道为什么页面上没起作用。
折腾了一段时间,又有一个思路。是不是元素没有对应起来。在页面捕获了一下页面元素,确实是页面的元素和js里面获取到的元素不是一回事,没有匹配起来。
很简单的一个问题,花费了一个多小时的时间。并且还搞得很烦躁。
问题解决之后,回顾一下,发现,其实前端遇到没有明显报错,但就是页面效果不正常的问题的几种思路:
1. 有时候某种写法行不通的时候,需要寻找另一种可替代的写法。
2. js中获取并操纵的元素和html中的元素没有匹配正确。
2. 通过两种元素重叠达到一种需要的视觉效果来解决问题。
有一个需求是要在页面上显示两个按钮,如下图所示。通过点击“选择图片”可以打开图片上传的窗口,上传图片。等到上传完之后,点击“上传”按钮,实现把上传的图片发到服务器端的效果。
最后,是通过在项目代码中借鉴了另外一个同事在之前写的一个设计。就是在选择图片的地方,通过把按钮和上传图片的入口input框重叠,然后通过把input框的透明度设置导致在页面上不能显示看出来,看上去只是一个按钮的样子。
样式如下
picUpload, .fileUpload {
width: 100px;
height: 30px;
opacity: 0; //透明度
position: absolute
}
我认为这种思路在处理前端设计问题的时候很值得借鉴。