星级选择 html,jquery星级评分.html

.xingji{

position: relative;

background-color: lightcyan;

}

.xingxing a{

display: inline-block;

width:19px;

height: 19px;

/* background-color: red; */

background-image: url(img/star.png);

}

.active{

background-position: 0 -28px;

}

.active0{

background-position: 0 -28px;

}

.contents{

position: absolute;

}

.assess{

display: inline-block;

position: absolute;

left: 150px;

top: 10px;

}

请点击星星进行评分:

var msgs = ["很不满意|差得太离谱，与卖家描述的严重不符，非常不满",

"不满意|部分有破损，与卖家描述的不符，不满意",

"一般|质量一般，没有卖家描述的那么好",

"满意|质量不错，与卖家描述的基本一致，还是挺满意的",

"非常满意|质量非常好，与卖家描述的完全一致，非常满意"];

$('.xingxing a').mouseenter(function(){

$('.xingxing a').removeClass('active0');

$(this).prevAll().addClass('active');

$(this).addClass('active');

var msg=msgs[$(this).index()];

var left=$(this).position().left;

$('.contents').text(msg).css('left',left);

});

var index0=0;

$('.xingxing a').click(function(){

$('.xingxing a').removeClass('active0');

$(this).addClass('active0').prevAll().addClass('active0');

$('.assess').text($(this).index()+1+'分'+$('.contents').text());

index0=$(this).index();

});

$('.xingxing a').mouseleave(function(){

$(this).prevAll().removeClass('active');

$(this).removeClass('active');

console.log(index0)

$('.xingxing a').eq(index0).addClass('active0').prevAll().addClass('active0');

$('.contents').text(null);

});

一键复制

编辑

Web IDE

原始数据

按行查看

历史