前端解决问题思路汇总

最新推荐文章于 2023-09-14 11:30:34 发布

weixin_34202952

最新推荐文章于 2023-09-14 11:30:34 发布

阅读量644

点赞数

文章标签：前端 python ViewUI

原文链接：https://my.oschina.net/ChinaHaoYuFei/blog/1604253

版权

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

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

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

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

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

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

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

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

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

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

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

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

样式如下

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

}

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

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

关注