星星评价
自己写的 (星星评价) 插件
星星评价,满意度为 很满意、满意、一般、不满意、很差
初始化为 很满意
![图片](https://img-blog.csdn.net/20160707145807628)
全部代码:
<!DOCTYPE html>
<html lang="en">
<head>
<title>星星评价</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<style type="text/css">
.xingbox{clear: both;padding-top:10px;text-align: center;color: #999999;padding-top: 5px;width: 100%;}
.xingbox .starscore{
margin: 0 auto 0 15%;
width: 100%;
}
.xingbox .starscore i {
width: 10%;
height:30px;
display: block;
background: url(score-nor_icon.png) no-repeat;
float: left;
background-size:30px;
display: inline;
margin:0px 2% 0 2%;
}
.xingbox .starscore i.onred {
background: url(score-pre_icon.png) no-repeat;
background-size:30px;
}
.text{clear: both;padding-top: 15px;}
</style>
</head>
<body>
<div class="xingbox">
<div class="starscore sstar" data-score="5">
<i class="onred" data-index="4" ></i>
<i data-index="1"></i>
<i data-index="2"></i>
<i data-index="3"></i>
<i data-index="4"></i>
</div>
<p class="text"></p>
</div>
<script type="text/javascript" src="../lib/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="index.js"></script>
<script type="text/javascript">
$(function(){$(".starscore").BindStars();})
</script>
</body>
</html>
index.js
(function ($) {
$.fn.BindStars = function () {
var starElement = $(this),
txt = $('.text');
starElement.children("i").addClass('onred');
txt.text('很满意');
starElement.children("i").on('click',function () {
var curIndex = starElement.find("i").index(this);
if(curIndex==0){
txt.text('很差');
}else if(curIndex == 1){
txt.text('不满意');
}else if(curIndex == 2){
txt.text('一般');
}else if(curIndex == 3){
txt.text('满意');
}else if(curIndex == 4){
txt.text('很满意');
}
starElement.find("i").each(function (index) {
if (index <= curIndex) {
$(this).addClass("onred");
}
else {
$(this).removeClass("onred");
}
});
starElement.attr("data-score", curIndex + 1);
});
};
$.fn.SetStars = function (score) {
var scoreStr = "";
for (var i = 0; i < 5; i++) {
if (i < score) {
scoreStr += "<i class='onred'></i>";
} else {
scoreStr += "<i></i>";
}
}
$(this).html(scoreStr);
};
})(window.jQuery);
如有错误地方,请留言指教,谢谢大家