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

JQUERY实现预约日期选择效果

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

简介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>

站点信息

  • 建站时间:2017-10-24
  • 网站程序:Hsycms 3.0
  • 文章统计:511条
  • 微信公众号:扫描二维码,关注我们