前端解决问题思路汇总

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

 1. HTML与js元素不匹配导致的问题。

今天遇到一个问题,是需要给 datepicker 控件赋值。常规的赋值方法是

$('#createBirthdayInput').datepicker('setDate', '2018-09-18');

但是无论怎么样页面上都不起效果。

我最开始的想法是觉得可能这种赋值方法在这里不起作用。想改成另外的赋值方法。但是网上浏览了一圈,也没有发现有什么差异性的方法。顶多就是再赋值之前,对时间格式化了一下,但是不是直接导致不起作用。并且前端元素调试发现也确实获取到元素了。但就是不知道为什么页面上没起作用。

折腾了一段时间,又有一个思路。是不是元素没有对应起来。在页面捕获了一下页面元素,确实是页面的元素和js里面获取到的元素不是一回事,没有匹配起来。

很简单的一个问题,花费了一个多小时的时间。并且还搞得很烦躁。

问题解决之后,回顾一下,发现,其实前端遇到没有明显报错,但就是页面效果不正常的问题的几种思路:

    1. 有时候某种写法行不通的时候,需要寻找另一种可替代的写法。

    2. js中获取并操纵的元素和html中的元素没有匹配正确。

2. 通过两种元素重叠达到一种需要的视觉效果来解决问题。

有一个需求是要在页面上显示两个按钮,如下图所示。通过点击“选择图片”可以打开图片上传的窗口,上传图片。等到上传完之后,点击“上传”按钮,实现把上传的图片发到服务器端的效果。

前端解决问题思路汇总_第1张图片

最后,是通过在项目代码中借鉴了另外一个同事在之前写的一个设计。就是在选择图片的地方,通过把按钮和上传图片的入口input框重叠,然后通过把input框的透明度设置导致在页面上不能显示看出来,看上去只是一个按钮的样子。

样式如下

picUpload, .fileUpload {
    width: 100px;
    height: 30px;
    opacity: 0; //透明度
    position: absolute

}

我认为这种思路在处理前端设计问题的时候很值得借鉴。

 

    

转载于:https://my.oschina.net/ChinaHaoYuFei/blog/1604253

你可能感兴趣的:(前端解决问题思路汇总)