zoukankan      html  css  js  c++  java
  • JQ模态框+简易评价

    EvaCourse:function(){//课程评价
            
            var p=['不好','一般','不错','很好','非常好'],
                $mask=$(".mask"),//遮罩
                 $starBox=$("#star-box"),//评价触发盒子
                 $modalBox=$(".modal-box"),//弹出框
                 $pText=$("#text-info"),//'不好','一般','不错','很好','非常好' 显示信息
                 $subtn=$("#star-btn"),//提交按钮
                 $inputTxt=$("#input-txt"),//输入文本框
                 $starList=$("#star-list");//评论星星列表
            
            //点击评价星星、显示遮罩和评价框
            $starBox.click(function(){
                openBox();
            });
            
            
            $mask.click(function(){
                closeBox();
            });
            
            $subtn.click(function(){
                closeBox();
            });
            
            //点击评价星星切换对应评价
            $starList.on('click','li',function(){
                $index=$(this).index();
                console.log($index)
                switch($index){
                    case 0:
                        $("#star-list>li").removeClass('active').eq($index).addClass('active');
                        $pText.text(p[$index]);
                        break;
                    case 1:
                        removeClass();
                        $("#star-list>li:lt(2)").addClass('active');
                        $pText.text(p[$index]);
                        break;
                    case 2:
                        removeClass();
                        $("#star-list>li:lt(3)").addClass('active');
                        $pText.text(p[$index]);
                        break;
                    case 3:
                        removeClass();
                        $("#star-list>li:lt(4)").addClass('active');
                        $pText.text(p[$index]);
                        break;
                    case 4:
                        removeClass();
                        $("#star-list>li:lt(5)").addClass('active');
                        $pText.text(p[$index]);
                        break;
                }
            });
            function removeClass(){
                    $("#star-list>li").removeClass('active');
            }
            function openBox(){//打开遮罩和评价框
                $mask.show();
                $modalBox.show();
            }
            function closeBox(){//关闭遮罩和评价框
                $mask.hide();
                $modalBox.hide();
            }
        }
  • 相关阅读:
    splay区间模板-1331-序列终结者1
    splay单点模板-5203-BZOJ3224 普通平衡树
    线段树模板-1204-影子的宽度
    树状数组模板-1200-序列和
    YAML配置复杂集合类型
    webpack vue-router vue 打包上线一些列问题
    idea 注释模板
    JavaScript中reduce()方法
    ES6实用语法糖
    axios 备忘
  • 原文地址:https://www.cnblogs.com/xzma/p/7268535.html
Copyright © 2011-2022 走看看