FXK Javascript

Javascript是一门神奇的语言,很不爽的一门语言,很纠结的一门语言.

以下内容,专业人士请不要看,只供像我一样的菜鸟参考.

(1)Javascript找不到函数.明明已经引用了JS文件,却提示找不到函数.仔细检查发现,JS文件中另一个函数中存在语法错误,导致另一个函数找不到.将错误改正,即可找到函数.

　　VS编辑器中,有绿色的下划线的错误,需要仔细改正检查

(2)自己写了一个加载页码的函数,通过AJAX获取相关信息,然后通过JS循环附加.奇怪的是页面中总会少点东西.比如,<<,<符号用来表示第一页,前一页,生成的页面中,该两个符号经常会合成一个符号.

　　以为是显示层面的问题,放到table中,每个td保留足够的宽度,结果还是会出现这个问题.经过试验,似乎是JS文件中变量的问题.将附加<<符号的变量与<符号的变量,用两个字符代替,即不会出现此问题.

　　比如:原代码 var p1=document.createElement("a"); 

　　　　　　　　.......

　　　　　　　　p1=document.createElement("a");

　　　　　　　　......

　　修改为: 　　var p1=document.createElement("a"); 

　　　　　　　　.......

　　　　　　　　var p2=document.createElement("a");

　　　　　　　　......

(3)checkbox不显示的问题: 下载了网上的一个网页模板,在Modal中添加checkbox,前面的方框一直不显示.通过IE的开发者工具,发现Modal中有此html代码.

　　多方排查,原因,层层嵌套的CSS中,某一个css中设置了其opacity为0,导致了不显示.网页模板中没打算在Modal的Form标签中添加checkbox,因此,原作者故意设计的

　　Form标签的某种特效,导致了此处的不显示问题.

(4)未知提交也无法阻止的问题.在Modal中增加了Form表单,Modal中自带一个页脚Div,用以放入Button等按钮.程序设计为在此处点击按钮之后,验证然后提交至服务器.

　　验证与提交功能一直很混乱,纠结到死.一直以为是JQuery 的Validate控件没有学好所致.后来发现,页脚DIV中即使放入一个<button>标签,啥都不设置,点击之后竟然

　　也提交至服务器.经长期纠结后发现,似乎是此处的模板做了些特殊设定,此处的按钮点击后,由JQuery通过某种途径,还是提交到了后台.

(5)JQuery Validate控件验证像死一样.第一次出现这个问题,是Form标签忘记赋id属性,所以,此处导致了某种找不到控件

　　第二次出现这个问题,是由于submit按钮写入了Form标签之外,可是由于错误(4)的问题,希望是提交按钮与Form标签不在一个Form表单中.

　　后来没有办法,还是将Button放入了Form中

(6) 1.BootStrap 的iCheck控件的radio的一些列操蛋问题

　　这个控件在<input type="radio"/>后通过JS代码增加了一些其他的东西,包括一些div等.

　　最初通过代码设置其为Checked,结果一直不显示.后来发现html源中多了好多东东,就自己写JS代码,

　　设置由JS生成的一大堆东东的样式属性等,以显示出选中的效果.可以解决问题.效果如下:

<div class="iradio_minimal" aria-checked="false" aria-disabled="false" style="position: relative;"><input name="rdSP" id="rdSp" style="background: rgb(255, 255, 255); margin: 0px; padding: 0px; border: 0px currentColor; border-image: none; left: -20%; top: -20%; width: 140%; height: 140%; display: block; position: absolute; opacity: 0;" onclick="StateSwitch()" type="radio" value="审批"><ins class="iCheck-helper" style="background: rgb(255, 255, 255); margin: 0px; padding: 0px; border: 0px currentColor; border-image: none; left: -20%; top: -20%; width: 140%; height: 140%; display: block; position: absolute; opacity: 0;"></ins></div>

　　2.后又出现新问题:

　　最初调试的时候,在<input type="radio" click="switchState()"/>,包含一个函数,刚开始执行正常.后来突然出现,

　　不在相应此事件了,推测似乎是在界面中的相关操作,被外层的DIV截获,处于底部的radio事件无法触发.

　　查询资料,iCheck的事件绑定需要使用代码,如下

//事件绑定
 $("#rdSp").on("ifClicked", function (event) {
          StateSwitch();
});
 $("#rdWsp").on("ifClicked", function (event) {
          StateSwitch();
 });

　　3.解决了上述问题,又出问题(一开始没有此问题的),radio的Check的状态获取不到了,明明选中了,代码中却获取不到这个checked.

　　还是推测被外层的DIV给截获了

　　通过查询资料,

　　使用bootstrap iCheck插件的radio的checked状态,应当通过如下代码获取

 if ($("#rdSp").prop("checked")) {
　　//to do something
 }

　　最初的通过document.getElemetById(),再获取checked属性的方法,对iCheck 包装的,一开始可以,后来就不行了

　　辣么,1.中描述通过JS代码层层设置其样式多个属性的方法也是比较啰嗦的,可通过如下代码实现:　

$("#rdSp").iCheck('check');
$("#rdWsp").iCheck('uncheck');

　　4.解决了上述问题之后,辣么,又出现了一个问题:

　　代码中跟选中的radio的不同,显示不同的界面,通过radio的Click事件调用StateSwitch()方法,判断一下目前的状态,再以JS 往界面添加内容.

　　却出了当我点击radio1时,js却得到了是radio2处于被选中的状态.

　　推测:JQuery应是先获取当前控件的Checked状态,再切换状态.

　　解决方法:checked取反,或者绑定ifChecked事件,来修改界面.