博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery动态五星评分
阅读量:7213 次
发布时间:2019-06-29

本文共 4490 字,大约阅读时间需要 14 分钟。

效果

422101-20160408151413406-19589710.png

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

    
jQuery实现五星级评分
商品
物流

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 = '' + ''; $(_config.selector).each(function(index, item) {
$(item).append(html); $(item).wrap($('
')); 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 = '' + score + '分'; $('.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'});});

转载地址:http://qlgum.baihongyu.com/

你可能感兴趣的文章
vue 源码学习(二) 实例初始化和挂载过程
查看>>
scrapy软连接失效和pip软连接失效
查看>>
IOS开发之OC-Switf 混编 -(OC 引 Swift 文件)
查看>>
JAVA并发之多线程基础(2)
查看>>
服务器返回的常见的http状态码
查看>>
HASHMAP(JDK1.7)最详细原理分析(二)
查看>>
string数组怎么定义
查看>>
我的关于前端一些知识点的理解《一》
查看>>
Asynctask源码分析
查看>>
Promise基础用法
查看>>
[译] Spring 的分布式事务实现-使用和不使用XA — 第三部分
查看>>
区块链软件公司:创新的区块链技术如何改变法律行业的面貌
查看>>
一张时序图让你看懂:脏读、不可重复读
查看>>
js创建对象的几种方法
查看>>
浮点数杂想
查看>>
摧枯拉朽,说说ES6的三把火
查看>>
Java/Android基础-02
查看>>
nginx代理响应报文体不全解决思路
查看>>
前端性能优化 —— 项目瘦身
查看>>
全球人形机器人接连突破 拟人度越来越高
查看>>