让美的事情发生
Ziv 小威
JS 实现星级评价

说明

  本方法采用了 Jquery 库,暂时检测兼容 IE8 版本。本示例的 2 种颜色的星星都是放入了一张 png 图片当中,当然还有其他的一些实现思路。本示例展示的情况是当前页面只有一个星级评价的情况。

思路

  通过对星级显示元素的,mouseenter,mouseout,click 三个事件的监听,从而星星显示的个数。其中我用了 2 个变量(temp_value,choice_value)来存放当前选定星级的值和当前临时的星级值;

  • temp_value : 临时的星级值;
  • choice_value : 选择的星级值;
  • mouseenter : 鼠标移入,获取当前所在的星星级别赋予 temp_value,调整当前星星的图片颜色;
  • mouseout : 鼠标移除,通过对比 choice_value 值,重新调整星星图片颜色;
  • click : 鼠标单击后,获取当前的星级值,赋值给 choice_value;(注意在 click 前已经进行过 mouseenter 事件了,click 后进行了 mouseout 事件了)
  • 当完成选定值后,在需要提交评价值的时候,可以通过 JS 去获取变量 choice_value 的值;

HTML 结构代码:

<h1>评价:</h1>
<ul id="star">
    <li title="很差" id="star1" star="1"></li>
    <li title="差" id="star2" star="2"></li>
    <li title="一般" id="star3" star="3"></li>
    <li title="好" id="star4" star="4"></li>
    <li title="很好" id="star5" star="5"></li>
</ul>

注:如果页面中不止一个星级评价,也就是出现多行的情况,这个时候只需要对 Dom 中 li 的 id 进行一些改造,加上动态的下标,从而区分不同的元素。另外有个点就是,我把选定的星级值放入的是 JS 变量中去了,多个评价值的情况下,建议可以在 Dom 中加上隐藏表单域去存放选定的当前星级值。

JS 实现代码:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var _temp_value = 0,//鼠标hover时的等级value
            choiceValue = 0;//默认选定的等级值为1

        //鼠标移入的时候
        $("#star li").mouseenter(function() {
            //获取当前的星级
            _temp_value = new Number($(this).attr("star"));
            showStar();

        //鼠标移入的时候
        }).mouseout(function(){
            hideStar();

        //鼠标移入的时候
        }).click(function(){
            //单击时,设定当前的选定值
            choiceValue = _temp_value;        hideSatr();  
        });

        //星级显示
        function showStar() {
            for (var i = 1 ; i < _temp_value+1; ++i) {
                $("#star"+i).addClass("choice");
            }
        }

        function hideStar() {
            for (var i = 5 ; i > choiceValue; --i) {
                $("#star"+i).removeClass("choice");
            }
        }
    });
</script>

如有问题,请联系我!这里是 Demo 地址:http://xiaoweijs.duapp.com/demo/star-level/index.html


最后修改于 2014-01-09

Comments powered by Disqus