第二次修改之后的代碼點擊星星不亮了只亮本來的兩顆什么毛病第一種方式還是可以點亮的
<body>
<!-- 第一種實現(xiàn)方式 -->
<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 src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js">
</script>
<script>
? ? ? ? (function () {
? ? ? ? var num=2,
? ? ? ? $rating=$("#rating");
? ? ? ? $item=$rating.find(".rating-item");
? ? ? ? // 點亮
? ? ? ? var lightOn=function(num){
? ? ? ? ? ? $item.each(function(index){
? ? ? ? ? ? ? ? if(index < num){
? ? ? ? ? ? ? ? ? ? // $(this).css("backgroundPosition","0 0");
? ? ? ? ? ? ? ? ? ? $(this).css("backgroundPosition","0 -68px");
? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? $(this).css("backgroundPosition","0 0");
? ? ? ? ? ? ? ? }
? ? ? ? ? ? });
? ? ? ? };
? ? ? ? // 初始化
? ? ? ? lightOn(num);
? ? ? ? // 綁定事件?
? ? ? ? $rating.on('mouseover','rating-item',function(){
? ? ? ? //將子元素rating-item委托給父元素rating
? ? ? ? ? ? lightOn($(this).index()+1);
? ? ? ? }).on('click','rating-item',function(){
? ? ? ? ? ? num=$(this).index()+1;
? ? ? ? }).on('mouseout',function() {//事件綁定
? ? ? ? ? ? lightOn(num);
? ? ? ? });
? ? ? ? })();
? </script>
</body>
2019-05-14
$rating.on方法的第二個參數(shù)是一個對象，應(yīng)該是.rating-item而不是rating-item