大佬，帮我看下，我的代码没有报错，但点亮不了星星，谢谢哈
来源：3-2 最基本的JS写法--JS的第一次尝试
蒹葭苍沧
2020-10-23 18:49
<!DOCTYPE html><html lang="zh-cn"> <head> <title>星级评分</title> <meta charset="utf-8"> <style type='text/css'> *{ margin: 0; padding: 0; } li{ list-style: none; } .rating{ width: 390px; height: 65px; background: url(start.jpg); margin: 100px auto; } .rating-item{ width: 65px; height: 65px; } </style> </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> <li class="rating-item" title='王者'></li> </ul> <script src='jquery.min.js'></script> <script type='text/javascript'> var num=2, $rating=$('#rating'), $item=$rating.find('.rating-item'); //点亮 var lightOn=function(num){ $item.each(function(index){ if(index<num){ $(this).css('background-position','0 -65px'); }else{ $(this).css('background-position','0 0'); } }); }; //初始化 lightOn(num); //事件绑定 $item.on('mouseover',function(){ lightOn($(this).index()+1); }).on('click',function(){ num=$(this).index()+1; }); $rating.on('mouseout',function(){ lightOn(num); }); </script> </body></html>
写回答
关注
3回答
-
- yipp
- 2022-02-10 05:54:40
你的css写错了，主要是
.rating {
width: 390px;
height: 32px;
margin: 100px auto;
}
.rating-item {
width: 32px;
height: 32px;
background: url(images/star.png);
float: left;
}
js部分没错的
-
- 慕梦前来
- 2021-12-25 17:00:05
先自己手动设置星星亮的情况看一下是不是不一样呢
-
- 慕梦前来
- 2021-10-16 14:12:35
你这个格式化一下也好呀，
星级评分原理和实现（上）
本课程主要讲解如何使用不同的方式来实现星级评分的效果.
25809 学习 · 109 问题
相似问题