為什么我的點(diǎn)亮是后一個(gè)好用，前一個(gè)不好用
<!DOCTYPE html>
<html>
? <head>
? ? <meta charset="utf-8" />
? ? <title>星級(jí)評(píng)分之第一種寫法</title>
? ? <style>
? ? ? body, ul, li {
? ? ? ? padding: 0;
? ? ? ? margin: 0;
? ? ? }
? ? ? li {
? ? ? ? list-style: none;
? ? ? }
? ? ? .rating {
? ? ? ? width: 250px;
? ? ? ? height: 30px;
? ? ? ? margin: 100px auto;
? ? ? }
? ? ? .rating-item {
? ? ? ? display: inline-block;
? ? ? ? width: 30px;
? ? ? ? height: 30px;
? ? ? ? background:url(images/xj1.jpg) 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="rating1">
? ? ? <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>
? ? <ul class="rating" id="rating2">
? ? ? <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>
? ? ?<ul class="rating" id="rating3">
? ? ? <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>
?var rating=(function(){
? // 點(diǎn)亮
? ? ? var lightOn = function($item,num) {
? ? ? ? $item.each(function(index) {
? ? ? ? ? if(index < num) {
? ? ? ? ? ? $(this).css('background-position', '0 -30px');
? ? ? ? ? } else {
? ? ? ? ? ? $(this).css('background-position', '0 0');
? ? ? ? ? }
? ? ? ? });
? ? ? };
? ? ?var init=function(el,num){
//緩存、jQuery對(duì)象與DOM對(duì)象
? ? ? var $rating = $(el)
? ? ? ? ? $item = $rating.find('.rating-item');
??
? // 初始化
? ? ? ? ? lightOn($item,num);
? ? ? ? ?// 事件綁定
? ? ? ? ? $rating.on('mouseover','.rating-item',function() {
? ? ? ? ? ?console.log($(this).index());
? ? ? ? ? ?lightOn($item,$(this).index() + 1);
? ? ? ? ? ?}).on('click','.rating-item', function() {
? ? ? ? ? ? ? ? num = $(this).index() + 1;
? ? ? ? ? ? ? }).on('mouseout', function() {
? ? ? ? ? ?lightOn($item,num);
? ? ? });
};
return{
init:init
};
})();
rating.init("#rating1",2);
rating.init("#rating2",1);
rating.init("#rating3",3);
? ? </script>
? </body>
</html>
2019-02-22
找到問題了，給出答案，真的是細(xì)節(jié)問題：
var $rating = $(el);//兩個(gè)var分別申明變量的話，這邊是分號(hào)
var $item = $rating.find(".rating-item");
或者用一個(gè)var申明兩個(gè)變量，就是用逗號(hào)
var $rating = $(el)，//逗號(hào)
?$item = $rating.find(".rating-item");
2019-01-25
解決了，落個(gè)逗號(hào)