自己做了一个星星打分插件。想着用最短的代码去实现它。
<style>
.icon-star-empty{
color:#ddd;
cursor:pointer;
}
.icon-star{
color:orange;
cursor:pointer;
}
.star-group{
cursor:default;
}
</style>
<div class="star-group"><span>创新</span>
<i class="icon-star-empty star"></i>
<i class="icon-star-empty star"></i>
<i class="icon-star-empty star"></i>
<i class="icon-star-empty star"></i>
<i class="icon-star-empty star"></i>
<span class="star-result"></span>
</div>
<div class="star-group"><span>实用</span>
<i class="icon-star-empty star"></i>
<i class="icon-star-empty star"></i>
<i class="icon-star-empty star"></i>
<i class="icon-star-empty star"></i>
<i class="icon-star-empty star"></i>
<span class="star-result"></span>
</div>
<div class="star-group"><span>设计</span>
<i class="icon-star-empty star"></i>
<i class="icon-star-empty star"></i>
<i class="icon-star-empty star"></i>
<i class="icon-star-empty star"></i>
<i class="icon-star-empty star"></i>
<span class="star-result"></span>
</div>
</pre><pre name="code" class="html"><script>
$(document).ready(function(){
star(2,3,4,"abc.txt");
});
function star(a,b,c,url){
var starresult = new Array(a,b,c);
var stargroup = document.getElementsByClassName('star-group');
for (var i = 0; i < stargroup.length; i++) {
var star = $(stargroup[i]).find('.star');
$(star).siblings('.star-result').html(starresult[i]+"星");
for (var y = 0; y < starresult[i] ; y++) {
$(star[y]).removeClass("icon-star-empty");
$(star[y]).addClass("icon-star");
};
};//初始化stargroup的星星
for (var sgi = 0; sgi < stargroup.length; sgi++) {
// sgi用途是循环每个stargroup的hover事件
$(stargroup[sgi]).hover(function(){
var star = $(this).find('.star');
sgiindex = $(this).index();
// sgiindex的用途是找到每个stargroup的序号,对于不影响其他stargroup的值非常重要
for (var i = 0; i < 6; i++) {
$(star[i]).hover(function(){
var starindex = $(this).index();
// starindex的用途是找到hover到的星星的序号
$(star).removeClass('icon-star');
$(star).addClass('icon-star-empty');
// 上面两句使星星的状态初始化,全部空星星
for (var y = 0; y < starindex ; y++) {
$(star[y]).removeClass("icon-star-empty");
$(star[y]).addClass("icon-star");
};
// 此循环让序号小于hover序号的星星都变成实心星星
});
$(star[i]).click(function(){
starresult[sgiindex] = $(this).index();
// 将点击到的星星的序号值给starresult,之所以是数组,是让三行stargroup的值不互相影响
$(this).siblings('.star-result').html(starresult[sgiindex]+"星");
// 改后面span的输出文字
var starresult1 = starresult[sgiindex];
$.post(url,{sgiindex,starresult1})
})
};
},function(){
// hover离开时执行
var star = $(this).find('.star');
$(star).removeClass('icon-star');
$(star).addClass('icon-star-empty');
// 初始化星星状态
for (var y = 0; y < starresult[sgiindex] ; y++) {
$(star[y]).removeClass("icon-star-empty");
$(star[y]).addClass("icon-star");
// 把之前click储存的值都一一取出来实现,sgiindex的值是为了实现此hover到的stargroup,不影响其他行
};
});
}
}