关于js的常用示例

1.我们都知道，无论是淘宝、京东甚至一些很小的博客，但凡是涉及到评论。都会看到选择星星。那么我们如何去模拟这种评论呢？

我们以一排5个星星为例：

1.html代码：

<span><i class="star"></i></span>
<span><i class="star"></i></span>

<span><i class="star"></i></span>

<span><i class="star"></i></span>

<span><i class="star"></i></span>

2.css文件

i {
    display: inline-block;
    width: 20px;
    height: 16px;
    cursor: pointer;
}
.star {
	background: url(默认星星图片地址) center center no-repeat;
}

.star-selected {
    background: url(点击后的星星图片地址) center center no-repeat;
}

.star:hover {
    background: url(鼠标放在星星上的图片地址) center center no-repeat;
}
.star-selected:hover {
    background: url(点击后的星星图片地址) center center no-repeat;
}

备注：这里是把星星图片当成 <i></i> 的背景图片，其中要有3种样式的图片。

3.js片段

$('.star').on('click',function(e) {
	var $target = $(e.target);
	$target.addClass('star-selected').prevAll('.star').addClass('star-selected');
	$target.nextAll('.star').removeClass('star-selected')
		
})

这里是一个非常简单的处理方法（基于jquery）

主要是：prevAll(),和nextAll()的用法，有兴趣的同学们可以尝试的去修改去优化。