mobile Web 星星打分 实践

<div class="text-center star-box" style="margin:20px 0">
<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><span class="star-avg"></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><span class="star-avg"></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><span class="star-avg"></span>
</div>
</div>

(function starin(){
var sg = new Array();
$(".star").click(function(){
var stargroup = $(this).parent();
var star = $(stargroup).find('.star');
var starvalue = $(this).index();
var stargroupvalue = $(stargroup).index();
sg[stargroupvalue] = starvalue;
a = sg[0];
b = sg[1];
c = sg[2];
console.log(a,b,c)
$(star).siblings('.star-result').html(starvalue+" 分");
for (var i = 0; i < starvalue; i++) {
$(star[i]).removeClass("icon-star-empty");
$(star[i]).addClass("icon-star");
};
for (var y = starvalue; y < 6; y++) {
$(star[y]).removeClass("icon-star");
$(star[y]).addClass("icon-star-empty");
};
a=null;
b=null;
c=null;
})
})()

由于mobile端只能click，或者说tap，没有hover，故重新设计了这个插件。