1.表单验证
绑定的事件还没触发，就已经执行过了， 按钮还没按下，就已经显示span内容了
问题原因：绑定错事件了，把所有的 Input 都绑定了事件...
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .item{ 8 250px; 9 height: 60px; 10 position: relative; 11 } 12 .item input{ 13 200px; 14 } 15 .item span{ 16 position: absolute; 17 top: 20px; 18 left: 20px; 19 font-size: 8px; 20 opacity: 0.8; 21 } 22 </style> 23 </head> 24 <body> 25 <div> 26 <form> 27 <div class="item"> 28 <input type="text" name="username" label="用户名"> 29 <!-- <span>用户名不能为空</span>--> 30 </div> 31 <div class="item"> 32 <input type="password" name="pwd" label="密码"> 33 <!-- <span>密码不能为空</span>--> 34 </div> 35 <input type="submit" value="提交" > 36 </form> 37 </div> 38 <script src="jquery-3.5.0.js"></script> 39 <script> 40 $(function () { 41 BindCheck(); 42 }); 43 function BindCheck() { 44 $('form input').click(function () { 45 $('form .item span').remove(); 46 var flag=true; 47 $('form .item input[type="text"],.item input[type="password"]').each(function () { 48 // ($(this).parent().find('span')).remove(); 49 var val=$(this).val(); 50 51 if(val.length<=0){ 52 var label = $(this).attr('label'); 53 var tag=document.createElement('span'); 54 tag.innerText=label+'不能为空'; 55 $(this).after(tag); 56 flag=false; 57 } 58 }); 59 return flag; 60 }); 61 62 } 63 64 65 </script> 66 </body> 67 </html>
2.滚动菜单
出错的问题和要点
1.如果要在某个class 里再加个样式就要具体到这个class的名称，然后再加样式
如：把menu加fix样式就要.pg-body .menu.fix
或想给menu里的某个menu-item加active样式就要.pg-body .menu .menu-item.active
2.滑动的时候每次都把所有项目拿出来循环，即使已经有符合的项目
可以在判断的后面加return false
3.滑动的时候，第三章显示不了，不够高度来判断
页面前面有<!DOCTYPE html> $(window).height() 也不能获取窗口高度，所以窗口高度用的是document.documentElement.clientHeight;
但是进行判断是总是差一点，所以只能用整个HTML的高度-1
scroll（滚动高度）+winheight（窗口高度）>=docheight（文档高度）-1
ps:滚动的高度，加窗口的高度，就是整个HTML的高度
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 body{ 8 margin: 0; 9 } 10 .pg-header{ 11 background-color: #2e6ab1; 12 color: black; 13 height: 60px; 14 100%; 15 } 16 .pg-body{ 17 } 18 .pg-body .menu{ 19 background-color: #6ce26c; 20 position: absolute; 21 top:60px; 22 bottom: 0; 23 left:30px; 24 80px; 25 } 26 .pg-body .content{ 27 background-color:yellow; 28 position: absolute; 29 top:60px; 30 right: 30px; 31 left:120px; 32 } 33 .pg-body .content .content-item{ 34 height: 500px; 35 } 36 .pg-body .menu.fix{ 37 position: fixed; 38 top:10px; 39 40 } 41 .pg-body .menu .menu-item.active{ 42 color: red; 43 44 } 45 </style> 46 </head> 47 <body> 48 <div class="pg-header">内容</div> 49 50 <div class="pg-body"> 51 <div class="menu"> 52 <div class="menu-item" menu="i1">第一章</div> 53 <div class="menu-item" menu="i2">第二章</div> 54 <div class="menu-item" menu="i3">第三章</div> 55 </div> 56 57 <div class="content"> 58 <div class="content-item" name="i1">第一章内容</div> 59 <div class="content-item" name="i2">第二章内容</div> 60 <div class="content-item" name="i3">第三章内容</div> 61 </div> 62 </div> 63 <script type="text/javascript" src="jquery-3.5.0.js"></script> 64 <script> 65 $(function () { 66 Init(); 67 }); 68 function Init() { 69 $(window).scroll(function () { 70 var scroll = $(window).scrollTop(); 71 if(scroll>60){ 72 $('.menu').addClass('fix'); 73 }else { 74 $('.menu').removeClass('fix'); 75 $('.menu').children().removeClass('active'); 76 }; 77 $('.content').children().each(function () { 78 //当前标签距离顶部的高度 offset有 offset.top和offset.left 79 var offset = $(this).offset(); 80 //用来判断是否滚动到标签顶部 81 var pd =scroll-offset.top; 82 //自身高度 83 var height = $(this).height(); 84 var docheight = $(document).height(); 85 var winheight =document.documentElement.clientHeight; 86 console.log(docheight); 87 console.log(winheight); 88 console.log(scroll); 89 if (pd>=0&&pd<height+offset.top){ 90 91 92 if(scroll+winheight>=docheight-1){$('.menu').find('div[menu=i3]').addClass('active').siblings().removeClass('active');} 93 else{ 94 var name=$(this).attr('name'); 95 $('.menu').find('div[menu="'+name+'"]').addClass('active').siblings().removeClass('active'); 96 } 97 }; 98 }); 99 }) 100 } 101 </script> 102 </body> 103 </html>