<html>
<head>
<meta charset="utf-8">
<style>
#serviceBox {
width: 490px;
overflow: hidden;
}
#professionalBox {
width: 490px;
overflow: hidden;
}
.commentStar {
width: 330px;
}
#serviceBox span, #professionalBox span {
display: block;
width: 80px;
height: 30px;
line-height: 30px;
float: left;
}
#serviceBox .message, #professionalBox .message {
width: 80px;
height: 30px;
border-radius: 5px;
outline: none;
border: none;
color: #000;
background: #fff;
float: right;
}
#comment_form .commentStar li {
list-style: none;
float: left;
overflow: hidden;
font-size: 20px;
cursor: pointer;
text-decoration: none;
color: #000;
}
#submint_btn {
list-style: none;
}
</style>
<!--<link rel="stylesheet" href="styles/web/model2.min.css">-->
<script type="text/javascript" src="scripts/web/jquery2.min.js"></script>
<script src="scripts/web/jQuery.Form.js"></script>
</head>
<body>
<div id="c-comments">
<div class="m-mainTitleBox">
评价
<a class="m-moreBtn" >更多>></a>
</div>
<div class="c-content">
<div class="c-content">
<form id="comment_form">
<div id="serviceBox">
<span>服务态度</span>
<div id="service_star" class="commentStar">
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
</div>
<input type="text" value="3分" name="service_score" class="message">
</div>
<div id="professionalBox">
<span>专业能力</span>
<div id="professional_star" class="commentStar">
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
</div>
<input type="text" value="3分" name="professional_score" class="message">
</div>
<div id="comment_words">
<textarea cols="50" rows="10" name="comment" placeholder="请输入文字评价"></textarea>
</div>
<div id="submit">
<li id="submint_btn">
<input type="button" value="提交">
</li>
</div>
</form>
</div>
</div>
</div>
<div id="JQObjs"></div>
</body>
<script type="text/javascript">
//参数分别是有星星的div的id,默认分数,临时存储分数,选中的css样式,选中的html内容,默认的css样式,默认的html内容
showStars($("#service_star"),2,2,{"color": "#ff7e00"},"★",{"color":"#000"},"☆");
showStars($("#professional_star"),2,2,{"color": "#ff7e00"},"★",{"color":"#000"},"☆")
function showStars(dom,default_num,temp_num,sel_css,sel_html,del_css,del_html){
//星星样式初始化
function starInit(default_num){
dom.children("li").eq(default_num).css(sel_css).html(sel_html).prevAll().css(sel_css).html(sel_html).end().nextAll().css(del_css).html( del_html);
}
starInit(default_num)
//鼠标划入,当前这个li及前面的li做选中样式和html内容
dom.on("mouseenter", "li", function () {
$(this).css(sel_css).html(sel_html).prevAll().css(sel_css).html(sel_html).end().nextAll().css(del_css).html( del_html);
//鼠标划入时做分数显示
var ind = $(this).index();
$(this).parent().siblings(".message").val((ind + 1)+"分");
}).on("click", "li", function () {
//鼠标点击时,标记被点击的li 加上class "clicked" 并且把相邻的别的点击事件加上的class去掉
$(this).addClass('clicked').siblings().removeClass('clicked');
//临时分数的存储,便于下面鼠标离开显示鼠标点击的状态
temp_num = $(this).index();
$(this).parent().siblings(".message").val((temp_num + 1)+"分");
}).on("mouseleave", function () {
//如果用户没有选择只是鼠标划入划出,那么还是初始化星星样式
starInit(default_num)
//如果有点击会直接根据点击时加的"clicked"来作用样式
$(".clicked").css(sel_css).html(sel_html).prevAll().css(sel_css).html(sel_html).end().nextAll().css(del_css).html( del_html);
//鼠标划出得显示存储的点击的临时分数
$(this).siblings(".message").val((temp_num + 1)+"分")
});
}
</script>
</html>