今天晚上加班，又写了一些很基础的东西，感觉到自己的js基础还是很差的，对于数据结构上的理解还差了很多火候。
这里主要实现了一些小功能，点击添加按钮的时候，自动生成input框，并且设定限制个数，最多不超过3个，当class字段超过3个的时候，就不继续往下执行程序了。然后点击提交按钮的时候，把input框里面所有的值提交到后端，可以在控制台打印出来查看所提交的字段。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> </head> <body> <div class="container"> <div><span style="font-size: 24px" onclick="addOne()">+</span></div> <div> <input type="text" name="" class="start" value="08:00"> <input type="text" name="" class="end" value="08:30"> </div> <div> <input type="text" name="" class="start" value="08:30"> <input type="text" name="" class="end" value="09:00"> </div> <div><button onclick="submit()">submit</button></div> </div> <script type="text/javascript"> function addOne(){ if($('.start').length > 2){ return alert('时间超过三个了') } var lis = ''; lis += '<div><input type="text" name="" class="start" value=""><input type="text" name="" class="end" value=""></div>' $('.container').append(lis) } function submit(){ var startDivs = $('.start'); var params = {}; var timeArr = []; var url = ''; for(var i = 0; i < startDivs.length; i++){ var start = $(startDivs[i]).val(); var end = $(startDivs[i]).next('input.end').val(); var tmpObj = {}; tmpObj.start = start; tmpObj.end = end; timeArr.push(tmpObj); } alert(JSON.stringify(timeArr)); params.timeArr = timeArr; $.post(url, params,function(rtn){ if(rtn.code === 200){ return true; }else{ return false; } }) } $(function(){ console.log($('.start').length); }) </script> </body> </html>
