html评分图标,Bootstrap图标实现移动端的星星评分功能

利用Bootstrap图标实现星星评分功能：

评星

.pf .glyphicon {

color: orange;

user-select: none;

padding: 0px 10px;

}

.pf li {

padding: 10px 0px;

font-size:16px;

}

• 总体

• 菜品

• 服务

提交

var tip=['','1分','2分','3分','4分','5分'];

$('.pf').on('mousedown','.glyphicon',function(){

if($(this).hasClass('glyphicon-star')){

var score = 0;

$(this).parent().attr('data-rh-score' ,score);

$(this).addClass('glyphicon-star-empty').removeClass('glyphicon-star').siblings('.glyphicon').addClass('glyphicon-star-empty').removeClass('glyphicon-star');

$(this).nextAll('.tip').text(tip[0]);

}else{

var score = $(this).index();

$(this).parent().attr('data-rh-score' ,score);

$(this).addClass('glyphicon-star').removeClass('glyphicon-star-empty').prevAll('.glyphicon').addClass('glyphicon-star').removeClass('glyphicon-star-empty');

$(this).nextAll('.tip').text(tip[score]);

}

});

// var fs1 = $('#star1').nextAll('.rater-star-result').text();

效果：

源码下载路径：