JQuery制作的评星打分功能

评星打分系统最早出现在视频网站，因为表现形式比较生动，再配合Ajax功能易用的特点，而深受用户和开发人员喜欢。网上的实现方法也是各种各样，最近刚看到一个用Jquery实现评分的插件（地址在这里），可能是中午看得文章，代码有点长，搞得我很是头晕，索性下午自己把以前写的一个用来练CSS的静态模型加了点jquery代码，让它也生动起来。自我感觉我这个评分系统的HTML结构更加明朗和语义化，再者将默认、高亮、打分后三种状态的五星图片合成一张图片来实现便于管理。如果这个小东西再配上ajax和PHP就可以立马上线投入实战了，这里就不多说了，相信各位看官也都明白这些。

演示效果如下：

• 1
• 2
• 3
• 4
• 5

 

先看脚本：

var j = jQuery.noConflict();
j(document).ready(function(){
    var stepW = 26;
    var description = new Array("非常差，回去再练练","真的是差，都不忍心说你了","一般，还过得去吧","很好，是我想要的东西","太完美了，此物只得天上有，人间哪得几回闻!");
    var stars = j("#xzw_star > li");
    var descriptionTemp;
    j("#showb").css("width",0);
    stars.each(function(i){
        j(stars[i]).click(function(e){
            var n = i+1;
            j("#showb").css({"width":stepW*n});
            descriptionTemp = description[i];
            j(this).find('a').blur();
            return stopDefault(e);
            return descriptionTemp;
        });
    });
    alert(descriptionTemp);
    stars.each(function(i){
        j(stars[i]).hover(
            function(){
                j(".description").text(description[i]);
            },
            function(){
                if(descriptionTemp != null)
                    j(".description").text("当前您的评价为："+descriptionTemp);
                else 
                    j(".description").text(" ");
            }
        );
    });
});

function stopDefault(e){
    if(e && e.preventDefault)
           e.preventDefault();
    else
           window.event.returnValue = false;
    return false;
};

再看样式：

#xzw_starSys *{}{margin:0; padding:0}
#xzw_starSys ul, #xzw_starSys li {}{ list-style-type:none}
#xzw_starSys{}{height:20px; width:500px; border:1px solid #cecece; margin:10px auto; padding:5px; font-size:12px; line-height:22px; overflow:hidden}
#xzw_starBox{}{position:relative; width:130px; float:left; }
#xzw_starSys .description {}{float:left; margin-left:20px}
#xzw_starSys .star {}{ height:20px; width:130px; position:relative; background:url(images/star.gif) left -40px repeat-x; cursor:pointer}
#xzw_starSys .star li {}{ float:left; padding:0px; margin:0px;}
#xzw_starSys .star li a {}{ display:block; width:26px; height:20px; overflow:hidden; text-indent:-9999px; position:absolute; z-index:5;  }
#xzw_starSys .star li a:hover {}{background:url(images/star.gif) left center ; z-index:3; left:0; }
#xzw_starSys .star a.one-star {}{left:0; }
#xzw_starSys .star a.one-star:hover {}{width:26px;}
#xzw_starSys .star a.two-stars {}{left:26px; }
#xzw_starSys .star a.two-stars:hover {}{width:52px;}
#xzw_starSys .star a.three-stars {}{left:52px; }
#xzw_starSys .star a.three-stars:hover {}{width:78px;}
#xzw_starSys .star a.four-stars {}{left:78px; }
#xzw_starSys .star a.four-stars:hover {}{width:104px;}
#xzw_starSys .star a.five-stars {}{left:104px; }
#xzw_starSys .star a.five-stars:hover {}{width:130px;}

#xzw_starSys .current-rating{}{ background: url(images/star.gif) left top; position: absolute; height: 20px; z-index: 1; top:0; left:0 }

最后是HTML结构：

<div id="xzw_starSys">
    <div id="xzw_starBox">
        <ul class="star" id="xzw_star">
            <li><a href="#" title="1颗星" class="one-star">1</a></li>
            <li><a href="#" title="2颗星" class="two-stars">2</a></li>
            <li><a href="#" title="3颗星" class="three-stars">3</a></li>
            <li><a href="#" title="4颗星" class="four-stars">4</a></li>
            <li><a href="#" title="5颗星" class="five-stars">5</a></li>
        </ul>
        <div class="current-rating" id="showb"></div>
    </div>
    <span class="description"></span>
</div>

后记：当这个东西做完的时候，我又联想到似乎可以用图形来结合表单元素比如radio,checkbox做一些有趣的图像化表单选择操作。有空再尝试尝试...