parking-server/plugins/tooth/tooth.js

(function($){
    $.fn.tooth = function(options){
        let toothId = this.initToothHtml(options);
        this.initPopup(toothId,options ? options.success : function(){});
    }

    $.fn.initToothHtml  = function(options){
        let toothId = this.attr("id");
        let settings = $.extend({
            'width': 192,
            'height': 40,
            success: function(){}
        }, options);

        let tdWidth = Math.round(parseInt(settings.width-1)/2-1)-2;
        let tdHeight = Math.round(parseInt(settings.height)/2-1);

        let html ='<span class="tooth-all" id="tooth_all_'+toothId+'" contenteditable="false" style="width: '+settings.width+'px;">';
        html += '<span id="tooth_value_'+toothId+'" class="content" style="width: '+settings.width+'px;height: '+settings.height+'px;">';
        html += '<span class="div_td right_up" style="width: '+tdWidth+'px;height: '+tdHeight+'px;line-height: '+tdHeight+'px;"></span>';
        html += '<span class="div_td left_up" style="width: '+tdWidth+'px;height: '+tdHeight+'px;line-height: '+tdHeight+'px;"></span>';
        html += '<span class="div_td right_down" style="width: '+tdWidth+'px;height: '+tdHeight+'px;line-height: '+tdHeight+'px;"></span>';
        html += '<span class="div_td left_down" style="width: '+tdWidth+'px;height: '+tdHeight+'px;line-height: '+tdHeight+'px;"></span>';
        html += '</span>';
        html += '</span>';
        this.html(html);
        return toothId;
    }

    /**
     * 电子病历选择牙位使用
    */
    $.fn.initPopupByEmr = function(toothId,ele,callback,cancelCallback){
        //点击时弹出牙位选择
        if ($("#tooth_popup_div").length > 0) { 
            // 存在删除
            $("#tooth_popup_div").remove();
        }

        $("#"+toothId).append(getPopupHtml());

        initPopupEvent(toothId,callback,cancelCallback);

        // 初始化
        // 右上
        setValueStyle($(ele).find(".right_up").html(),'rght_up');

        // 左上
        setValueStyle($(ele).find(".left_up").html(),'left_up');

        // 右下
        setValueStyle($(ele).find(".right_down").html(),'rght_down');

        // 左下
        setValueStyle($(ele).find(".left_down").html(),'left_down');
    }

    initPopupEvent = function(toothId,callback,cancelCallback){
        //关闭弹出窗口
        $("#tooth_popup_div .close_label").on("click",function(){
            $("#tooth_popup_div").remove();
        });

        //鼠标悬浮事件
        $(".wisdom-select span>label, .num-select span>label").hover(function(){
            $(this).toggleClass("num-select-hover"); 
            let classNm = "tooth_"+$(this).attr("position")+$(this).attr("value");
            $("."+classNm).toggleClass("drop-shadow");
        },function(){
            $(this).toggleClass("num-select-hover"); 
            let classNm = "tooth_"+$(this).attr("position")+$(this).attr("value");
            $("."+classNm).toggleClass("drop-shadow"); 
        });

        //选择效果
        $(".wisdom-select span>label, .num-select span>label").on("click",function(e){
            if(e){
                let target = e.currentTarget;
                //选择数字字母，有样式删除，无样式添加
                $(target).toggleClass("num-select-confirm"); 
                setToothClass($(target));
            }
        });

        //添加按钮事件
        setPopupButton();
        
        //确定
        $("#btnSure").on("click",function(){
            let allSelects = $(".num-select-confirm");
            if(!allSelects || allSelects.length == 0){
                return false;
            }
            // console.log(allSelects)
            let toothResult = {};
            // toothResult = [];
            allSelects.each(function(index,ele){
                let jele = $(ele)
                // console.log(ele,jele.attr("position"));
                let position = jele.attr("position");
                let type = jele.attr("type");
                let value = jele.attr("value");
                
                let obj = {
                    position: position,
                    type: type, 
                    value: value
                }
                // toothResult.push(obj);
                if(type == "letter"){
                    //乳牙
                    toothResult[position+"-"+type+"-"+value] = obj;
                } else {
                    //恒牙
                    toothResult[position+"-pmnt-"+value] = obj;
                }
            });

            //设置显示
            // id="tooth_value_'+toothId+'" 
            //98765E4D3C2B1A
            let result = setResultHtml(toothResult,toothId)

            // console.log(toothResult);
            callback(result);
            $("#tooth_popup_div").remove();
        });

        //取消
        $("#btnCancel").on("click",function(){
            $("#tooth_popup_div").remove();
            if(cancelCallback){
                cancelCallback();
            }
        });

        //初始化
        initPopupValue(toothId);
    }

    $.fn.initPopup = function(toothId,callback){
        //点击时弹出牙位选择
        $("#tooth_value_"+toothId).on("click",function(){
            if ($("#tooth_popup_div").length > 0) { 
                // 存在删除
                $("#tooth_popup_div").remove();
            }

            $("#tooth_all_"+toothId).append(getPopupHtml());

            initPopupEvent(toothId,callback);
        });

    }

    // 初始化
    function initPopupValue(toothId){
        // 右上
        setValueStyle($("#tooth_all_"+toothId+" .right_up").html(),'rght_up');

        // 左上
        setValueStyle($("#tooth_all_"+toothId+" .left_up").html(),'left_up');

        // 右下
        setValueStyle($("#tooth_all_"+toothId+" .right_down").html(),'rght_down');

        // 左下
        setValueStyle($("#tooth_all_"+toothId+" .left_down").html(),'left_down');
    }

    function setValueStyle(html,positionVal){
        if(html){
            let list = html.split("");
            list.forEach(value => {
                let type = "pmnt";
                if("ABCDE".indexOf(value) >= 0){
                    type = "letter";
                }

                let position = positionVal;
                if(value == "9"){
                    position = 'wisdom_'+positionVal;
                    type = "wisdom";
                }

                let target = $("label[position='"+position+"'][type='"+type+"'][value='"+value+"']");
                if(target && target.length != 0){
                    target.addClass("num-select-confirm");
                    setToothClass(target);
                }
            });
        }
    }

    function setResultHtml(toothResult,toothId){
        let result = {};

        // 右上
        let rghtUpHtml = fmtVal(toothResult["wisdom_rght_up-pmnt-9"]);
        rghtUpHtml += fmtVal(toothResult["rght_up-pmnt-8"]);
        rghtUpHtml += fmtVal(toothResult["rght_up-pmnt-7"]);
        rghtUpHtml += fmtVal(toothResult["rght_up-pmnt-6"]);
        rghtUpHtml += fmtVal(toothResult["rght_up-pmnt-5"]);
        rghtUpHtml += fmtVal(toothResult["rght_up-letter-E"]);
        rghtUpHtml += fmtVal(toothResult["rght_up-pmnt-4"]);
        rghtUpHtml += fmtVal(toothResult["rght_up-letter-D"]);
        rghtUpHtml += fmtVal(toothResult["rght_up-pmnt-3"]);
        rghtUpHtml += fmtVal(toothResult["rght_up-letter-C"]);
        rghtUpHtml += fmtVal(toothResult["rght_up-pmnt-2"]);
        rghtUpHtml += fmtVal(toothResult["rght_up-letter-B"]);
        rghtUpHtml += fmtVal(toothResult["rght_up-pmnt-1"]);
        rghtUpHtml += fmtVal(toothResult["rght_up-letter-A"]);
        $("#tooth_all_"+toothId+" .right_up").html(rghtUpHtml);
        result["rght_up"] = rghtUpHtml;

        //左上
        let leftUpHtml = fmtVal(toothResult["left_up-pmnt-1"]);
        leftUpHtml += fmtVal(toothResult["left_up-letter-A"]);
        leftUpHtml += fmtVal(toothResult["left_up-pmnt-2"]);
        leftUpHtml += fmtVal(toothResult["left_up-letter-B"]);
        leftUpHtml += fmtVal(toothResult["left_up-pmnt-3"]);
        leftUpHtml += fmtVal(toothResult["left_up-letter-C"]);
        leftUpHtml += fmtVal(toothResult["left_up-pmnt-4"]);
        leftUpHtml += fmtVal(toothResult["left_up-letter-D"]);
        leftUpHtml += fmtVal(toothResult["left_up-pmnt-5"]);
        leftUpHtml += fmtVal(toothResult["left_up-letter-E"]);
        leftUpHtml += fmtVal(toothResult["left_up-pmnt-6"]);
        leftUpHtml += fmtVal(toothResult["left_up-pmnt-7"]);
        leftUpHtml += fmtVal(toothResult["left_up-pmnt-8"]);
        leftUpHtml += fmtVal(toothResult["wisdom_left_up-pmnt-9"]);
        $("#tooth_all_"+toothId+" .left_up").html(leftUpHtml);
        result["left_up"] = leftUpHtml;

        // 右下
        let rghtDownHtml = fmtVal(toothResult["wisdom_rght_down-pmnt-9"]);
        rghtDownHtml += fmtVal(toothResult["rght_down-pmnt-8"]);
        rghtDownHtml += fmtVal(toothResult["rght_down-pmnt-7"]);
        rghtDownHtml += fmtVal(toothResult["rght_down-pmnt-6"]);
        rghtDownHtml += fmtVal(toothResult["rght_down-pmnt-5"]);
        rghtDownHtml += fmtVal(toothResult["rght_down-letter-E"]);
        rghtDownHtml += fmtVal(toothResult["rght_down-pmnt-4"]);
        rghtDownHtml += fmtVal(toothResult["rght_down-letter-D"]);
        rghtDownHtml += fmtVal(toothResult["rght_down-pmnt-3"]);
        rghtDownHtml += fmtVal(toothResult["rght_down-letter-C"]);
        rghtDownHtml += fmtVal(toothResult["rght_down-pmnt-2"]);
        rghtDownHtml += fmtVal(toothResult["rght_down-letter-B"]);
        rghtDownHtml += fmtVal(toothResult["rght_down-pmnt-1"]);
        rghtDownHtml += fmtVal(toothResult["rght_down-letter-A"]);
        $("#tooth_all_"+toothId+" .right_down").html(rghtDownHtml);
        result["rght_down"] = rghtDownHtml;

        //左下
        let leftDownHtml = fmtVal(toothResult["left_down-pmnt-1"]);
        leftDownHtml += fmtVal(toothResult["left_down-letter-A"]);
        leftDownHtml += fmtVal(toothResult["left_down-pmnt-2"]);
        leftDownHtml += fmtVal(toothResult["left_down-letter-B"]);
        leftDownHtml += fmtVal(toothResult["left_down-pmnt-3"]);
        leftDownHtml += fmtVal(toothResult["left_down-letter-C"]);
        leftDownHtml += fmtVal(toothResult["left_down-pmnt-4"]);
        leftDownHtml += fmtVal(toothResult["left_down-letter-D"]);
        leftDownHtml += fmtVal(toothResult["left_down-pmnt-5"]);
        leftDownHtml += fmtVal(toothResult["left_down-letter-E"]);
        leftDownHtml += fmtVal(toothResult["left_down-pmnt-6"]);
        leftDownHtml += fmtVal(toothResult["left_down-pmnt-7"]);
        leftDownHtml += fmtVal(toothResult["left_down-pmnt-8"]);
        leftDownHtml += fmtVal(toothResult["wisdom_left_down-pmnt-9"]);
        $("#tooth_all_"+toothId+" .left_down").html(leftDownHtml);
        result["left_down"] = leftDownHtml;

        return result;
    }

    function fmtVal(value){
        if(value){
            return value.value;
        }
        return "";
    }

    // 选中数字 或者字母时，设置牙齿的样式
    function setToothClass(ele){
        let key = ele.attr("value");
        let isSelect1 = ele.hasClass("num-select-confirm");
        let isSelect2 = null;
        if(ele.attr("type") == "letter"){
            switch (key) {
                case "A":
                    key = "1";
                    break;
                case "B":
                    key = "2";
                    break;
                case "C":
                    key = "3";
                    break;
                case "D":
                    key = "4";
                    break;
                case "E":
                    key = "5";
                    break;
                default:
                    break;
            }
            isSelect2 = $("label[position='"+ele.attr("position")+"'][type='pmnt'][value='"+key+"']").hasClass("num-select-confirm");
        } else {
            switch (key) {
                case "1":
                    key = "A";
                    break;
                case "2":
                    key = "B";
                    break;
                case "3":
                    key = "C";
                    break;
                case "4":
                    key = "D";
                    break;
                case "5":
                    key = "E";
                    break;
                default:
                    break;
            }
            isSelect2 = $("label[position='"+ele.attr("position")+"'][type='letter'][value='"+key+"']").hasClass("num-select-confirm");
        }
        // console.log("isSelect1="+isSelect1,"isSelect2="+isSelect2)
        //数字或者字母有一天选择，则牙齿选中
        let classNm = "tooth_"+ele.attr("position")+key;
        // console.log("classNm=",classNm)
        if(isSelect1 || isSelect2){
            //选择牙齿
            $("."+classNm).addClass("drop-shadow-confirm"); 
        } else {
            $("."+classNm).removeClass("drop-shadow-confirm"); 
        }
    }

    function getPopupHtml(){
        let html = '<div id="tooth_popup_div">';
        html += '<div class="title">选择牙位<label class="close_label" title="关闭"><span class="close"></span></label></div>';
        html += '<div class="header">';
        html += '<button type="button" id="btnMilkTeeth">乳牙</button>';
        html += '<button type="button" id="btnAllTeeth">全口</button>';
        html += '<button type="button" id="btnLeftUpTeeth">左上</button>';
        html += '<button type="button" id="btnLeftDownTeeth">左下</button>';
        html += '<button type="button" id="btnRghtUpTeeth">右上</button>';
        html += '<button type="button" id="btnRghtDownTeeth">右下</button>';
        html += '<button type="button" id="btnUpHalfTeeth">上半口</button>';
        html += '<button type="button" id="btnDownHalfTeeth">下半口</button>';
        html += '<button type="button" id="btnClearTeeth">清除</button>';
        html += '</div>';
        html += '<div class="content">';
        
        //右上牙图
        html += '<div class="div_td tooth-image" id="tooth_rght_up">';
        html += '<span class="tooth_rght_up8"></span>';
        html += '<span class="tooth_rght_up7"></span>';
        html += '<span class="tooth_rght_up6"></span>';
        html += '<span class="tooth_rght_up5 tooth_rght_upE"></span>';
        html += '<span class="tooth_rght_up4 tooth_rght_upD"></span>';
        html += '<span class="tooth_rght_up3 tooth_rght_upC"></span>';
        html += '<span class="tooth_rght_up2 tooth_rght_upB"></span>';
        html += '<span class="tooth_rght_up1 tooth_rght_upA"></span>';
        html += '</div>';

        //左上牙图
        html += '<div class="div_td tooth-image" id="tooth_left_up">';
        html += '<span class="tooth_left_up1 tooth_left_upA"></span>';
        html += '<span class="tooth_left_up2 tooth_left_upB"></span>';
        html += '<span class="tooth_left_up3 tooth_left_upC"></span>';
        html += '<span class="tooth_left_up4 tooth_left_upD"></span>';
        html += '<span class="tooth_left_up5 tooth_left_upE"></span>';
        html += '<span class="tooth_left_up6"></span>';
        html += '<span class="tooth_left_up7"></span>';
        html += '<span class="tooth_left_up8"></span>';
        html += '</div>';

        //右上选择
        html += '<div class="div_td right_up" style="height:60px;line-height: 60px;padding-bottom: 10px;">';
        //数字选择
        html += '<div class="num-select">'
        html += '<span><label position="rght_up" type="pmnt" value="8">8</label></span>';
        html += '<span><label position="rght_up" type="pmnt" value="7">7</label></span>';
        html += '<span><label position="rght_up" type="pmnt" value="6">6</label></span>';
        html += '<span><label position="rght_up" type="pmnt" value="5">5</label></span>';
        html += '<span><label position="rght_up" type="pmnt" value="4">4</label></span>';
        html += '<span><label position="rght_up" type="pmnt" value="3">3</label></span>';
        html += '<span><label position="rght_up" type="pmnt" value="2">2</label></span>';
        html += '<span><label position="rght_up" type="pmnt" value="1">1</label></span>';
        html += '</div>';
        //字母选择
        html += '<div class="num-select">'
        html += '<span></span>';
        html += '<span></span>';
        html += '<span></span>';
        html += '<span><label position="rght_up" type="letter" value="E">E</label></span>';
        html += '<span><label position="rght_up" type="letter" value="D">D</label></span>';
        html += '<span><label position="rght_up" type="letter" value="C">C</label></span>';
        html += '<span><label position="rght_up" type="letter" value="B">B</label></span>';
        html += '<span><label position="rght_up" type="letter" value="A">A</label></span>';
        html += '</div>';
        html += '</div>';

        //左上选择
        html += '<div class="div_td left_up" style="height:60px;line-height: 60px;padding-bottom: 10px;">';
        //数字选择
        html += '<div class="num-select">'
        html += '<span><label position="left_up" type="pmnt" value="1">1</label></span>';
        html += '<span><label position="left_up" type="pmnt" value="2">2</label></span>';
        html += '<span><label position="left_up" type="pmnt" value="3">3</label></span>';
        html += '<span><label position="left_up" type="pmnt" value="4">4</label></span>';
        html += '<span><label position="left_up" type="pmnt" value="5">5</label></span>';
        html += '<span><label position="left_up" type="pmnt" value="6">6</label></span>';
        html += '<span><label position="left_up" type="pmnt" value="7">7</label></span>';
        html += '<span><label position="left_up" type="pmnt" value="8">8</label></span>';
        html += '</div>';
        //字母选择
        html += '<div class="num-select">'
        html += '<span><label position="left_up" type="letter" value="A">A</label></span>';
        html += '<span><label position="left_up" type="letter" value="B">B</label></span>';
        html += '<span><label position="left_up" type="letter" value="C">C</label></span>';
        html += '<span><label position="left_up" type="letter" value="D">D</label></span>';
        html += '<span><label position="left_up" type="letter" value="E">E</label></span>';
        html += '<span></span>';
        html += '<span></span>';
        html += '<span></span>';
        html += '</div>';
        html += '</div>';

        // 右下选择
        html += '<div class="div_td right_down" style="height:60px;line-height: 60px;padding-top: 10px;">';
        //字母选择
        html += '<div class="num-select">'
        html += '<span></span>';
        html += '<span></span>';
        html += '<span></span>';
        html += '<span><label position="rght_down" type="letter" value="E">E</label></span>';
        html += '<span><label position="rght_down" type="letter" value="D">D</label></span>';
        html += '<span><label position="rght_down" type="letter" value="C">C</label></span>';
        html += '<span><label position="rght_down" type="letter" value="B">B</label></span>';
        html += '<span><label position="rght_down" type="letter" value="A">A</label></span>';
        html += '</div>';
        //数字选择
        html += '<div class="num-select">'
        html += '<span><label position="rght_down" type="pmnt" value="8">8</label></span>';
        html += '<span><label position="rght_down" type="pmnt" value="7">7</label></span>';
        html += '<span><label position="rght_down" type="pmnt" value="6">6</label></span>';
        html += '<span><label position="rght_down" type="pmnt" value="5">5</label></span>';
        html += '<span><label position="rght_down" type="pmnt" value="4">4</label></span>';
        html += '<span><label position="rght_down" type="pmnt" value="3">3</label></span>';
        html += '<span><label position="rght_down" type="pmnt" value="2">2</label></span>';
        html += '<span><label position="rght_down" type="pmnt" value="1">1</label></span>';
        html += '</div>';
        html += '</div>';

        // 左下选择
        html += '<div class="div_td left_down" style="height:60px;line-height: 60px;padding-top: 10px;">';
        //字母选择
        html += '<div class="num-select">'
        html += '<span><label position="left_down" type="letter" value="A">A</label></span>';
        html += '<span><label position="left_down" type="letter" value="B">B</label></span>';
        html += '<span><label position="left_down" type="letter" value="C">C</label></span>';
        html += '<span><label position="left_down" type="letter" value="D">D</label></span>';
        html += '<span><label position="left_down" type="letter" value="E">E</label></span>';
        html += '<span></span>';
        html += '<span></span>';
        html += '<span></span>';
        html += '</div>';
        //数字选择
        html += '<div class="num-select">'
        html += '<span><label position="left_down" type="pmnt" value="1">1</label></span>';
        html += '<span><label position="left_down" type="pmnt" value="2">2</label></span>';
        html += '<span><label position="left_down" type="pmnt" value="3">3</label></span>';
        html += '<span><label position="left_down" type="pmnt" value="4">4</label></span>';
        html += '<span><label position="left_down" type="pmnt" value="5">5</label></span>';
        html += '<span><label position="left_down" type="pmnt" value="6">6</label></span>';
        html += '<span><label position="left_down" type="pmnt" value="7">7</label></span>';
        html += '<span><label position="left_down" type="pmnt" value="8">8</label></span>';
        html += '</div>';
        html += '</div>';

        //右下牙图
        html += '<div class="div_td tooth-image" id="tooth_rght_down">';
        html += '<span class="tooth_rght_down8"></span>';
        html += '<span class="tooth_rght_down7"></span>';
        html += '<span class="tooth_rght_down6"></span>';
        html += '<span class="tooth_rght_down5 tooth_rght_downE"></span>';
        html += '<span class="tooth_rght_down4 tooth_rght_downD"></span>';
        html += '<span class="tooth_rght_down3 tooth_rght_downC"></span>';
        html += '<span class="tooth_rght_down2 tooth_rght_downB"></span>';
        html += '<span class="tooth_rght_down1 tooth_rght_downA"></span>';
        html += '</div>';

        //左下牙图
        html += '<div class="div_td tooth-image" id="tooth_left_down">';
        html += '<span class="tooth_left_down1 tooth_left_downA"></span>';
        html += '<span class="tooth_left_down2 tooth_left_downB"></span>';
        html += '<span class="tooth_left_down3 tooth_left_downC"></span>';
        html += '<span class="tooth_left_down4 tooth_left_downD"></span>';
        html += '<span class="tooth_left_down5 tooth_left_downE"></span>';
        html += '<span class="tooth_left_down6"></span>';
        html += '<span class="tooth_left_down7"></span>';
        html += '<span class="tooth_left_down8"></span>';
        html += '</div>';

        //智齿
        html += '<div class="wisdom-select" id="wisdom_tooth">';
        html += '<span><label position="wisdom_rght_up" type="wisdom" value="9">19</label></span>';
        html += '<span><label position="wisdom_left_up" type="wisdom" value="9">29</label></span>';
        html += '<span><label position="wisdom_left_down" type="wisdom" value="9">39</label></span>';
        html += '<span><label position="wisdom_rght_down" type="wisdom" value="9">49</label></span>';
        html += '</div>';

        html += '</div>';

        //按钮
        html += '<div class="footer">';
        html += '<button type="button" id="btnSure">确定</button>';
        html += '<button type="button" id="btnCancel">取消</button>';
        html += '</div>';

        html += '</div>';
        return html;
    }

    function setPopupButton(){

        // 左上
        function setLeftUpTeeth(){
            //数字
            $("label[position='left_up'][type='pmnt']").addClass("num-select-confirm");
            //牙齿
            $("#tooth_left_up span").addClass("drop-shadow-confirm");
        }

        // 左下
        function setLeftDownTeeth(){
            //数字
            $("label[position='left_down'][type='pmnt']").addClass("num-select-confirm");
            //牙齿
            $("#tooth_left_down span").addClass("drop-shadow-confirm");
        }

        // 右上
        function setRghtUpTeeth(){
            //数字
            $("label[position='rght_up'][type='pmnt']").addClass("num-select-confirm");
            //牙齿
            $("#tooth_rght_up span").addClass("drop-shadow-confirm");
        }

        // 右下
        function setRghtDownTeeth(){
            //数字
            $("label[position='rght_down'][type='pmnt']").addClass("num-select-confirm");
            //牙齿
            $("#tooth_rght_down span").addClass("drop-shadow-confirm");
        }

        function clearSelect(){
            $(".drop-shadow-confirm").removeClass("drop-shadow-confirm");
            $(".num-select-confirm").removeClass("num-select-confirm");
        }

        //乳牙
        $("#btnMilkTeeth").on("click",function(){
            clearSelect();

            //字母
            $("label[position='left_up'][type='letter']").addClass("num-select-confirm");
            $("label[position='left_down'][type='letter']").addClass("num-select-confirm");
            $("label[position='rght_up'][type='letter']").addClass("num-select-confirm");
            $("label[position='rght_down'][type='letter']").addClass("num-select-confirm");

            for(let i=1;i<=5;i++){
                //数字
                // $("label[position='left_up'][value='"+i+"']").addClass("num-select-confirm");
                // $("label[position='left_down'][value='"+i+"']").addClass("num-select-confirm");
                // $("label[position='rght_up'][value='"+i+"']").addClass("num-select-confirm");
                // $("label[position='rght_down'][value='"+i+"']").addClass("num-select-confirm");

                //牙齿
                $(".tooth_left_up"+i).addClass("drop-shadow-confirm");
                $(".tooth_left_down"+i).addClass("drop-shadow-confirm");
                $(".tooth_rght_up"+i).addClass("drop-shadow-confirm");
                $(".tooth_rght_down"+i).addClass("drop-shadow-confirm");
            }
        });

        //全口
        $("#btnAllTeeth").on("click",function(){
            clearSelect();
            setLeftUpTeeth();
            setLeftDownTeeth();
            setRghtUpTeeth();
            setRghtDownTeeth();
        });

        //左上
        $("#btnLeftUpTeeth").on("click",function(){
            clearSelect()
            setLeftUpTeeth();
        });

        //左下
        $("#btnLeftDownTeeth").on("click",function(){
            clearSelect()
            setLeftDownTeeth();
        });

        //右上
        $("#btnRghtUpTeeth").on("click",function(){
            clearSelect()
            setRghtUpTeeth();
        });

        //右下
        $("#btnRghtDownTeeth").on("click",function(){
            clearSelect()
            setRghtDownTeeth();
        });

        //上半口
        $("#btnUpHalfTeeth").on("click",function(){
            clearSelect()
            setLeftUpTeeth();
            setRghtUpTeeth();
        });

        //下半口
        $("#btnDownHalfTeeth").on("click",function(){
            clearSelect()
            setLeftDownTeeth();
            setRghtDownTeeth();
        });

        
        //清除
        $("#btnClearTeeth").on("click",function(){
            clearSelect();
        });
    }
})(jQuery);