JQ模态框+简易评价

时间:2021-03-25 21:17:40
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();
}
}