自己的思路乱写的,请指教

来源:3-4 改进代码--JS第二次尝试

ThinkSummer

2017-06-01 16:01

var rating = (function(){
	'use strict';
	
	function init(el, num) {

		var $items = $(el).find('.rating-item');

		$items.each(function(i, item) {
			if ($(this).index() <= num) {
				console.log('小于num')
				$(this).css('background-position', '2px -28px');
			} else {
				$(this).css('background-position', '2px 0');
			}
		});
	}

	function events($rating,num){
		var num = num;
		$rating.on({
			'mouseover' : function() {
				var i = $(this).index();
				init($rating, i);
			} ,
			'click' : function() {
				var i = $(this).index();
				num = i;
				init($rating, i);
			}
		}, '.rating-item').on('mouseout', function(){
			init($rating, num);
		});
	}


	$.fn.extend({
		rating : function(num=1) {
			$(this).each(function(i, el) {
				init(el, num);
				events($(this), num);
			});
		}
	});
	
})(jQuery);

$('.rating').rating(0)

有点跟不上老师的思路,按照自己的思路来了一遍,页面一片星星都能运行。但是不知道代码的质量如何。

写回答 关注

1回答

  • zhangyudemuke
    2017-06-03 13:39:37

    基本的功能都实现了,也没有错误,听一遍就能写出来也算是很厉害了。

    建议你把鼠标移除事件和鼠标点击事件利用事件绑定放在父元素上,这样可以降低浏览器的性能需求。

星级评分原理和实现(上)

本课程主要讲解如何使用不同的方式来实现星级评分的效果.

25809 学习 · 109 问题

查看课程

相似问题