<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>星级评分</title>
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<style>
.com-star .xx-star {
background:url("star.png") no-repeat;
height:20px;
width:20px;
display:inline-block;
}
.com-star .xx-star2 {
background:url("star-active.png") no-repeat;
height:20px;
width:20px;
display:inline-block;
}
</style>
</head>
<body>
<div class="star-evaluate">
<div class="com-star float-left">
<i class="xx-star" onclick="praise(1,$(this));"></i>
<i class="xx-star2" onclick="praise(2,$(this));"></i>
<i class="xx-star2" onclick="praise(3,$(this));"></i>
<i class="xx-star2" onclick="praise(4,$(this));"></i>
<i class="xx-star2" onclick="praise(5,$(this));"></i>
</div>
<span class="display-star float-right">1星</span>
</div>
<script>
function praise(num, obj) {
obj.prevAll().attr('class', 'xx-star');
obj.attr('class', 'xx-star');
obj.nextAll().attr('class', 'xx-star2');
$(".display-star").html(num + '星');
}
</script>
</body>
</html>
