【实践】大三下蛋项目上笔记

简介


大三下软件体系结构课程项目-前端有

主页效果翻

签到页效果翻

(可能加载比较慢)

框架


基于Bootstrap,ECharts,JQuery开发

作者


Nirvana-zsy

github地址

时间


 开始时:20170308

率先不好提交时:20170310

其次不良创新时间:20170321

前后台接口说明


 

见上述github地址

 

种类受到相遇的题目


1.jq中数组的遍历

问题讲述:

由表单中复选框在传值方式是这样的:

<input type="checkbox" name="hobby" value="足球">足球
<input type="checkbox" name="hobby" value="电影">电影
<input type="checkbox" name="hobby" value="音乐">音乐

 

当自身当选足球和音乐两个选择,向后台传递的键值对出错是这样的:hobby=足球&hobby=音乐

然而咱组的后台gg说,能不能够把拥有的价在一个字符串里不胫而走后台呢?就是如此的效益:hobby=足球+音乐

于是乎自己虽用在交付表单前,获取具有的当选的checkbox的value值,再整治到一个字符串里边,然后再度赋值给一个用来传值的隐蔽的输入框传给后台。

一样开始自己的代码是这么敲的

var checkbox_arr=$(".checkbox:checked");
var longstr='';
for(var i=0;i<checkbox_arr.length;i++){
    longstr=longstr+'+'+checkbox_arr[i].val();  
}

 

万般。。。正常的思路,而且test了转,数组的length是针对性之,然而,报错了:checkbox_arr[i].val
is not a function…

在网上查看了那个漫长,也扣了众多技术博客及文档,依旧没搜有因,但找到了其余一样栽思路:

var val_realstr = "";
$('.showcheckbox:checked').each(function(i){
f(0==i){
    val_realstr = $(this).val();
}else{
    val_realstr += ("."+$(this).val());
}
});

 

如此这般做是直通过jq的each()方法,直接针对checkboxDOM对象进行操作,each()方法本身就是是jq用来操作DOM对象的,这样做就是避免了中间差。

关于上面的道为什么错,我当segmentfault上问了,等解决了重新来填坑(天呐。。。我岂留下了这么多坑)

 

2.jq中attr(),prop()的区别

问题讲述:

如出一辙产生在checkbox身上。。。由于自身管每个checkbox都加大上了bootstrap的下拉列表组件里,它爸是li标签,由于a标签不像label标签一样有一个会与input关联的for属性,所以自己必于li上另外上加点击事件,当点击li时,改变子元素(也就是所点击的li标签下的checkbox)的checked的价,要改首先就要获取很值,于是问题就是涌出于此间,我之所以了attr()方法赢得不对,可是当我测试输出获取的因素的id值时,正确输出了,说明就是是attr()方法来摩擦,在自己翻看了文档和技艺博客之后才知道,attr(),prop(),分别要于啊时用:

attr():

对此HTML元素我们好于定义之DOM属性,在拍卖时,使用attr方法。

prop():

于HTML元素本身就隐含的原始属性,在处理常,使用prop方法。

这为不怕是我力所能及为此attr获取到checkbox元素id值,却取不至checked值的原由

 ————————–20170321更新———————————

这次本着事先的第2只问题又创新一下,也是关于checkbox。

 

先是说要达的效能:

1表单中科室默认是全中选的;

2当用户取消某个复选框时,“不限”的按钮也要是自行取消;

3当用户选中“不限”复选框,所有科室都使受活动选择着。

如图:

 Bootstrap 1

 

js代码的思绪:

 js代码思路非常粗略,

1页面加载后获取具有复选框dom节点然后将checked属性值设为true;

2补充加“不限”复选框的点击事件,然后取其checked值是true还是false,是true(此处注意要点击后是选中复选框,那么得到之价值就是true,获取到的匪是点击前之值,是点击后的价值,自信试验瞬间不怕知晓了);

3.吃所有科室复选框添加点击事件,这里跟方无等同,为了达到效果最良好方案应是,获取给入选的复选框,判断个数,小于13(一共发13个科室)则以“不限”复选框值设为false。

 

遇上的问题:

1.如上述,点击事件函数中拿走checked属性,获取到的值是点击后的;

2.尚是有关复选框的checked属性。

上次创新的prop和attr的区分没什么毛病,可是我又发现了震惊之新题材:

每当html中之复选框标签中安装checked属性值,

无论是这样

<input type="checkbox" checked>

 

要如此

<input type="checkbox" checked="true">

 

要如此

<input type="checkbox" checked="false">

 

结果,这个复选框,都 会 被 选 中!(经测试,在chrome,ff,safari,ie,edge中都是一样的结果)

本身以mdn查了瞬间checked这个特性,是这样讲述的

When
the value of the type attribute is checkbox, the presence of this
attribute indicates that the control is selected by default. You can
specify this as checked="checked", or simply just checked.

 说明这个特性是没false这个价的,在之后编码的时刻如果避免这坑。

 

脚附上源码:

 1 $(document).ready(function(){
 2 
 3     //默认选中所有复选框
 4     var showcheckbox=document.getElementsByClassName("showcheckbox");
 5     for(var i=0;i<showcheckbox.length;i++){
 6         showcheckbox[i].checked=true;
 7     }
 8     //默认选中"不限"复选框
 9     document.getElementById("allcheckbox").checked=true;
10 
11     //如果选中“不限”复选框,那么所有的都要选中
12     $("#allcheckbox").click(function(event) {
13         if($(this).prop('checked')==true){
14              var showcheckbox=document.getElementsByClassName("showcheckbox");
15             for(var i=0;i<showcheckbox.length;i++){
16                 showcheckbox[i].checked=true
17             }
18         }else{
19             
20         }
21     });
22 
23     //如果某个复选框没被选中,那么“不限”复选框就要取消
24     $(".showcheckbox").click(function(event) {
25         if($(".showcheckbox:checked").length<13){
26             document.getElementById("allcheckbox").checked=false;
27         }
28     });
29 }

 

相关文章