这次给大家带来JS实现评价星级,JS实现评价星级的注意事项有哪些,下面就是实战案例,一起来看一下。
虽然简单,还是有几个注意的地方:
1. 未点击时的hover效果,星星会随鼠标移动亮起来喔。
2. 点击后关闭hover效果。
3. 点击同一颗星星,星星可以随时换色。
具体代码展示:
.stars{
white-space: nowrap;
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
}
.stars li{
display: inline-block;
color:#ADADAD;
font-size: 40px;
}
- ★
- ★
- ★
- ★
- ★
$(function() {
//为星星设置hover效果
varisClicked =false;
varbeforeClickedIndex = -1;
varclickNum = 0;//点击同一颗星次数
$('li').hover(
function() {
if(!isClicked) {
$(this).css('color','#F0AD4E');
varindex = $(this).index();
for(vari = 0; i <= index; i++) {
$('li:nth-child('+ i +')').css('color','#F0AD4E');
}
}
},
function() {
if(!isClicked) {
$('li').css('color','#ADADAD');
}
}
);
//星星点击事件
$('li').click(function() {
$('li').css('color','#ADADAD');
isClicked =true;
varindex = $(this).index();
for(vari = 1; i <= index+1; i++) {
$('li:nth-child('+ i +')').css('color','#F0AD4E');
}
if(index == beforeClickedIndex) {//两次点击同一颗星星 该星星颜色变化
clickNum++;
if(clickNum % 2 == 1) {
$('li:nth-child('+ (index + 1) +')').css('color','#ADADAD');
}else{
$('li:nth-child('+ (index + 1) +')').css('color','#F0AD4E');
}
}else{
clickNum = 0;
beforeClickedIndex = index;
}
});
});
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读: