jQuery动态五星评分

效果

css

.star ul,
.star li {
    list-style: none;
}

.star {
    position: relative;
    width: 600px;
    height: 24px;
    margin: 20px auto 0;
}

.star span {
    float: left;
    height: 19px;
    line-height: 19px;
}

.star ul {
    margin: 0 10px;
}

.star li {
    float: left;
    width: 24px;
    height: 22px;
    text-indent: -9999px;
    background: url('../img/star.png') no-repeat;
    cursor: pointer;
}

.star li.on {
    background-position: 0 -28px;
}

.star p {
    padding: 10px 10px 0;
    position: absolute;
    top: 20px;
    width: 159px;
    height: 60px;
    z-index: 100;
}

.star p em {
    color: #FF6600;
    display: block;
    font-style: normal;
}

.star strong {
    color: #ff6600;
    padding-left: 10px;
}

.hidden {
    display: none;
}

html

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>jQuery实现五星级评分</title>
    <link rel="stylesheet" href="./css/score.css">
    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="./js/score.js"></script>

</head>
<body>
    <div class="star" id="goods">
        <span>商品</span>
        <input type="hidden" class="value-container" name="goods" value="">
        <ul>
            <li><a href="javascript:;">1</a></li>
            <li><a href="javascript:;">2</a></li>
            <li><a href="javascript:;">3</a></li>
            <li><a href="javascript:;">4</a></li>
            <li><a href="javascript:;">5</a></li>
        </ul>
    </div>

    <div class="star" id="logistics">
        <span>物流</span>
        <input type="hidden" class="value-container" name="logistics" value="">
        <ul>
            <li><a href="javascript:;">1</a></li>
            <li><a href="javascript:;">2</a></li>
            <li><a href="javascript:;">3</a></li>
            <li><a href="javascript:;">4</a></li>
            <li><a href="javascript:;">5</a></li>
        </ul>
    </div>
    <script type="text/javascript">
    $(function() {
        var goods_score = new Score({selector:'#goods.star'});
        var logistics_score = new Score({selector:'#logistics.star'});
    });
    </script>
</body>
</html>

js

function Score(options) { // 定义一个类
    this.config = {
        selector: '.star', // 评分容器
        renderCallback: null, // 渲染页面后回调
        callback: null // 点击评分回调
    };

    this.cache = {
        iStar: 0,
        iScore: 0
    };

    this.init(options); // 构造函数
}

Score.prototype = {
    constructor: Score,
    init: function(options) {
        this.config = $.extend(this.config, options || {});
        var self = this,
            _config = self.config,
            _cache = self.cache;

        self._renderHTML();
    },
    _renderHTML: function() {
        var self = this,
            _config = self.config;
        var html = '<span class="desc"></span>' +
            '<p class="star-p hidden"></p>';
        $(_config.selector).each(function(index, item) {
            $(item).append(html);
            $(item).wrap($('<div class="parentCls" style="position:relative"></div>'));
            var parentCls = $(item).closest('.parentCls');
            self._bindEnv(parentCls); // 方法层层相扣
            _config.renderCallback && $.isFunction(_config.renderCallback) && _config.renderCallback();
        });

    },
    _bindEnv: function(parentCls) {
        var self = this,
            _config = self.config,
            _cache = self.cache;

        $(_config.selector + ' li', parentCls).each(function(index, item) {

            // 鼠标移上
            $(item).mouseover(function(e) {
                var offsetLeft = $('ul', parentCls)[0].offsetLeft;
                ismax(index + 1);

                $('p', parentCls).hasClass('hidden') && $('p', parentCls).removeClass('hidden');
                $('p', parentCls).css({
                    'left': index * $(this).width() + 12 + 'px'
                });
            });

            // 鼠标移出
            $(item).mouseout(function() {
                ismax();
                !$('p', parentCls).hasClass('hidden') && $('p', parentCls).addClass('hidden');
            });

            // 鼠标点击
            $(item).click(function(e) {
                var index = $(_config.selector + ' li', parentCls).index($(this));
                _cache.iStar = index + 1;

                var score = index + 1;

                !$('p', parentCls).hasClass('hidden') && $('p', parentCls).addClass('hidden');
                var html = '<strong>' +
                    score +
                    '分</strong>';

                $('.desc', parentCls).html(html);

                // 加入分数
                $(this).parents(_config.selector).find('.value-container').val(score);
                // $(_config.selector).find('.value-container').val(score);

                _config.callback && $.isFunction(_config.callback) && _config.callback({
                    starAmount: _cache.iStar
                }); // 回调函数
            });

        });

        function ismax(iArg) {
            _cache.iScore = iArg || _cache.iStar;
            var lis = $(_config.selector + ' li', parentCls);

            for (var i = 0; i < lis.length; i++) {
                lis[i].className = i < _cache.iScore ? "on" : "";
            }
        }
    }
};

这里有两种方式

1.针对所有的.star的

2.针对具体的.star的

$(function() {
        //var score = new Score(); // 不传参数，默认是.star
        var goods_score = new Score({selector:'#goods.star'}); // 传参数，只针对id为goods的.star
        var logistics_score = new Score({selector:'#logistics.star'});
});

下载