星级评分--第一种实现方式 {
: : }
{
: }
.{
: : : }
.{
: : : :() : }
num= $rating=() $item=$rating.() =(num){
$item.((index){
(index<num){
().() }{
().() }
}) }
(num) $item.((){
(().()+) }).((){
num=().()+ }) $rating.((){
(num) })
2018-04-20
拿走，不谢。有兴趣的可以来这里看看：https://github.com/CruxF/IMOOC
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>星级评分之第一种写法</title>
<style>
body, ul, li {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
.rating {
width: 190px;
height: 32px;
margin: 100px auto;
}
.rating-item {
display: inline-block;
width: 32px;
height: 32px;
background: url(img/star.png) no-repeat;
cursor: pointer;
}
</style>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<ul class="rating" id="rating">
<li class="rating-item" title="十分不好"></li>
<li class="rating-item" title="不好"></li>
<li class="rating-item" title="一般"></li>
<li class="rating-item" title="十分不好"></li>
<li class="rating-item" title="很好"></li>
</ul>
<script>
//缓存、jQuery对象与DOM对象
var num = 2;
var $rating = $('#rating')
var $item = $rating.find('.rating-item');
// 点亮
var lightOn = function(num) {
$item.each(function(index) {
if(index < num) {
$(this).css('background-position', '0 -40px');
} else {
$(this).css('background-position', '0 0');
}
})
}
// 初始化
lightOn(num);
// 事件绑定
$item.on('mouseover', function() {
console.log($(this).index());
lightOn($(this).index() + 1);
}).on('click', function() {
num = $(this).index() + 1;
});
$rating.on('mouseout', function() {
lightOn(num);
})
</script>
</body>
</html>
举报
