您现在的位置是：网站首页>前端技术>HTML5教程HTML5教程

JQUERY实现预约日期选择效果

神夜2022-03-03 21:58:46【HTML5教程】2449人已围观文章来源：神夜个人博客

简介JQUERY实现预约日期选择效果，共有三个状态（已满，可选，已选），想获取data里的取值，然后进行判断，显示三个对应的样式，用户的'已选'只能有一个，'已满'的不参与点击

			<!DOCTYPE html>
		
			<html>
		
			    <head>
		
			        <meta charset="utf-8">
		
			        <title></title>
		
			        <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		
			        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		
			    </head>
		
			    <body>
		
			        <style>
		
			        *{ margin:0px; padding:0px; box-sizing: border-box;}
		
			        ul,li{list-style-type: none;}
		
			        body{ font-size:12px; color:#333; background:#F1f1f1;}
		
			        .center{ display: flex; justify-content: center; align-items: center;}
		
			        .selectDate { width:780px; margin:12px;}
		
			        .selectDate li{ margin-bottom:20px; }
		
			        .selectDate li dl{ display: flex; }
		
			        .selectDate li dl dt{ width:50px; height:50px; background:#333333; color:#fff; flex-direction: column; border-radius:5px;}
		
			        .selectDate li dl dd { cursor:pointer; width:40px; height:50px; background:#fff; border-radius:5px; border:1px solid #eee; margin-left:10px; flex-direction: column;}
		
			        .selectDate li dl dd.ym { cursor: default; background:#f60; color:#fff;}
		
			        .selectDate li dl dd p:nth-child(2){ margin:0px; padding:0px; line-height:5px;}
		
			        .selectDate li dl dd.on { background:#007AFF; color:#fff; border-color:#007AFF}
		
			        </style>
		
			        <!-- 时间UI -->
		
			        <ul class="selectDate" id="date"></ul>
		
			        <script>
		
			            //后台返回的数据
		
			            var datearr = [
		
			                {id:1,date:'周三',num:1,ym:true,time:[{start:'13:00',end:'13:50',check:false},{start:'14:00',end:'14:50',check:false},{start:'15:00',end:'15:50',check:false}]},
		
			                {id:2,date:'周四',num:2,ym:false,time:[{start:'13:00',end:'13:50',check:false},{start:'14:00',end:'14:50',check:false},{start:'15:00',end:'15:50',check:false}]},
		
			                {id:2,date:'周五',num:3,ym:false,time:[{start:'13:00',end:'13:50',check:false},{start:'14:00',end:'14:50',check:false},{start:'15:00',end:'15:50',check:false}]},
		
			            ]
		
			            //动态生成HTML
		
			            function initHtml(){
		
			                var html = ''
		
			                for(let i = 0; i < datearr.length; i++){
		
			                    html += `<li><dl><dt class="center"><p>${datearr[i].date}</p><span>${datearr[i].num}</span></dt>`;
		
			                    if(!datearr[i].ym){
		
			                        let timearr = datearr[i].time;
		
			                        for(let b = 0; b < timearr.length; b++){
		
			                            html+= `<dd class="center${timearr[b].check?' on':''}" data-man="0" data-index="${i}" data-timeindex="${b}"><p>${timearr[b].start}</p><p>-</p><p>${timearr[b].end}</p></dd>`;
		
			                        }
		
			                    }else{
		
			                        html += `<dd class="center ym" data-man="1">已满</dd>`;
		
			                    }
		
			                    html += '</dl></li>'
		
			                }
		
			                $("#date").html(html);
		
			            }
		
			            $(function(){
		
			                 //首先渲染HTML
		
			                 initHtml();
		
			                 //每个项单击
		
			                 $("#date li dl").on("click","dd",function(){
		
			                      let man = $(this).data("man");
		
			                        if(man=='0'){
		
			                            var index = $(this).data("index")
		
			                            var timeindex = $(this).data("timeindex")
		
			                            //先清空所有选中
		
			                            for(let i = 0; i < datearr.length; i++){
		
			                                for(let b = 0; b < datearr[i].time.length; b++){
		
			                                    datearr[i].time[b].check = false
		
			                                }
		
			                            }
		
			                            //再给当前选择的选中
		
			                            datearr[index].time[timeindex].check = true
		
			                            $("#date li dl dd").removeClass("on")
		
			                            $(this).addClass("on")
		
			                        }
		
			                 })
		
			            })
		
			        </script>
		
			    </body>
		
			</html>