评论星级 php,JS实现评价星级

这次给大家带来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中文网其它相关文章！

推荐阅读：