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'});
});

本文转自TBHacker博客园博客,原文链接:http://www.cnblogs.com/jiqing9006/p/5368258.html,如需转载请自行联系原作者
相关文章
|
JavaScript
jQuery 五角星评分案例(详细代码)
jQuery 五角星评分案例(详细代码)
107 0
|
6月前
|
JavaScript 前端开发
jquery实现动态五角星评分
jquery实现动态五角星评分
|
前端开发 JavaScript
jquery实现动态五角星评分
先上代码,最后附属上我的实现思路,新手做的bug多,大牛勿喷:请看代码: ☆ ☆ ☆ ☆ ☆
|
JavaScript 前端开发
jquery实现动态五角星评分
jquery实现动态五角星评分
99 0
|
JavaScript 前端开发
jQuery Raty - 不错的星级评分插件
jQuery Raty - 不错的星级评分插件
299 0
jQuery Raty - 不错的星级评分插件
|
Web App开发 移动开发 JavaScript
HTML5商城开发三 jquery 星星评分插件
展示:   实现方法: 1.html引用star-grade.js $(document).ready(function () { $(".
1188 0
|
JavaScript 前端开发
jQuery Raty - 不错的星级评分插件
版权声明:欢迎转载,请注明沉默王二原创。 https://blog.csdn.net/qing_gee/article/details/52296770 在做商品评价时,一般情况下,我们需要一个星级评分的组件,而jQuery Raty恰好满足我们的需求。
1013 0
|
JavaScript 前端开发 PHP
星级评分jquery插件
星级评分jquery插件 分享几个星型评级插件   1)jRating 是一个非常灵活的jQuery插件用于快速创建一个Ajax星型投票系统。
854 0
|
JavaScript 前端开发 API
一个非常棒的jQuery 评分插件--好东西要分享
  现在做网页已经不仅限于实现功能了,更多的是要实现功能的同时追求更加美观的实现。比如页面上让用户评分的功能,你完全可以放5个RdioButton让用户选择分数,也可以用DropDownList来实现,但那样不如用五个星星来得炫来得直观。
1073 0