js实现星级评分（第二种实现方式）

最新推荐文章于 2024-06-06 10:16:06 发布

qq_175****220

最新推荐文章于 2024-06-06 10:16:06 发布

阅读量793

点赞数

文章标签： js实现星级评分第二种实现方式

本文链接：https://blog.csdn.net/qq_29656961/article/details/78158372

版权

1.新建一个Dynamic Web Project项目，里面新建一个jsp文件，加入一张评分星星图片，星星图片和整体框架如图所示：

2.index.jsp里面的代码如下所示：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
body, ul, li {
	padding: 0;
	margin: 0;
}

li {
	list-style-type: none;
}

.rating {
	width: 130px;
	height: 26px;
	margin: 100px auto;
}

.rating-item {
	float: left;
	width: 26px;
	height: 26px;
	background: url("images/star.png") no-repeat;
	cursor: pointer;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script type="text/javascript" src="js/script.js" defer="defer"></script>
</head>
<body>
	<ul class="rating" id="rating1">
		<li class="rating-item" title="很不好"></li>
		<li class="rating-item" title="不好"></li>
		<li class="rating-item" title="一般"></li>
		<li class="rating-item" title="好"></li>
		<li class="rating-item" title="很好"></li>
	</ul>
	<ul class="rating" id="rating2">
		<li class="rating-item" title="很不好"></li>
		<li class="rating-item" title="不好"></li>
		<li class="rating-item" title="一般"></li>
		<li class="rating-item" title="好"></li>
		<li class="rating-item" title="很好"></li>
	</ul>
</body>
</html>

3.script.js里面的代码如下所示：

var rating = (function() {
	var LightEntire = function(el, options) {
		this.$el = $(el);
		this.$item = this.$el.find('.rating-item');
		this.opts = options;
	};
	LightEntire.prototype.init = function() {
		this.lightOn(this.opts.num);
		this.bindEvent();
	};
	LightEntire.prototype.lightOn = function(num) {
		num = parseInt(num);
		this.$item.each(function(index) {
			if (index < num) {
				$(this).css('background-position', '0 -26px');
			} else {
				$(this).css('background-position', '0 0');
			}
		});
	};
	LightEntire.prototype.bindEvent = function() {
		var self = this;
		var itemLength = self.$item.length;
		self.$el.on('mouseover', '.rating-item', function() {
			var num = $(this).index() + 1;
			self.lightOn(num);
		}).on('click', '.rating-item', function() {
			self.opts.num = $(this).index() + 1;
		}).on('mouseout', function() {
			self.lightOn(self.opts.num);
		});
	};
	var defaults = {
		num : 0,
		readOnly : false,
		select : function() {
		},
		chosen : function() {
		}
	};
	var init = function(el, options) {
		options = $.extend({}, defaults, options);
		new LightEntire(el, options).init();
	};
	return {
		init : init
	};
})();
rating.init('#rating1', {
	num : 3,
});
rating.init('#rating2', {
	num : 3,
});

4.在浏览器里面输入http://localhost:8080/Demo/index.jsp运行之后得到的结果：

qq_175****220

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现星级评分（第二种实现方式）

1.新建一个Dynamic Web Project项目，里面新建一个jsp文件，加入一张评分星星图片，星星图片和整体框架如图所示：2.index.jsp里面的代码如下所示：<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
复制链接

扫一扫