五颗星评论效果实现：jquery+css

今天说要做个星星评论的效果，想想不难吧，就试着写下；

通过网上搜索加自己想法，得到的思路是：

首先是排列好五个星星啦，接着则是css建立两个li的class分别表示选取与未选取（这样表述貌似不大对）；

主要是在未确定打分前，鼠标移到那颗星星，前面的跟本星星一起被亮了，其它的继续黯淡；

然后一旦确定点击，该情形将一直保持着直到下一个点击产生才改变亮与暗的情况。不过现在遇到的问题是一旦点击了之后，我还能评零分（没有一颗星星被点亮）么？可以的，不过我还没想出来。= =

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="zh-cn">
<head>
<title></title>
<style type="text/css">
ul {
　　list-style:none;
}
li{
    float:left;
    width:20px;
    background-image:url(image/star1.gif);
}
.no{
    float:left;
    width:20px;
    background-image:url(image/star1.gif);
}
.yes{
    float:left;
    width:20px;
    background-image:url(image/star2.gif);
}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    var clickId=0;//点击到的星星位置
    $("li").mousemove(function(){
        if(clickId==0){//如果未点击过，则执行此函数，否则就不用弄了，贪方便了= =
        var focusId=$(this).attr("id")/1;//id属性返回的好像不是一个num，所以用这个，不熟
            var i=1;
            for(;i<=5;i++){
            if(i<=focusId){
                $("#"+i).removeClass().addClass('yes');
                }else{
                    $("#"+i).removeClass().addClass('no');
                }
            }
   
        }
        
    });
    $("li").click(function(){
        var focusId=$(this).attr("id")/1;
　　　　if(focusId>=clickId){
            var i=clickId+1;
            for(;i<=focusId;i++){
                $("#"+i).removeClass().addClass('yes');
            }
        }else{
            var i=focusId+1;
            for(;i<=clickId;i++){
                $("#"+i).removeClass().addClass('no');
            }
        }
        clickId=focusId;
    });
    $("li").mouseleave(function(){//未有点击时实现鼠标离开则无亮星星
        if(clickId==0){

　　　　　　var i=1;
            for(;i<=5;i++){
                $("#"+i).removeClass().addClass('no');
            }
            }
    });
        
});

</script>
</head>
    <body>
        <div id="starAll">
            <ul class="stars">
                <li class="no" id="1">&nbsp;</li>
                <li class="no" id="2">&nbsp;</li>
                <li class="no" id="3">&nbsp;</li>
                <li class="no" id="4">&nbsp;</li>
                <li class="no" id="5">&nbsp;</li>
            </ul>
        </div>
    </body>
</html>