这次给大家带来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; } }); });
登录后复制
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
以上就是JS实现评价星级的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2770733.html
