问答详情
源自:3-4 改进代码--JS第二次尝试

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

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)

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

提问者:ThinkSummer 2017-06-01 16:01

个回答

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

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

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