<div class="container"></div> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script> <script> let count=10 let score=5 for(let i=0;i<count;i++){ let star=$('<i/>').addClass('iconfont star') if(i<score){ star.addClass('icon-start-copy') }else{ star.addClass('icon-star1') } $(".container").append(star) }$('.star').mouseenter(function(){ let index=$(this).index() for(let i=0;i<count;i++){ let star=$('.star').eq(i) if(i<=index){ star.addClass('icon-start-copy').removeClass('icon-star1') }else{ star.addClass('icon-star1').removeClass('icon-start-copy') } }})$('.star').mouseleave(function(){ for(let i=0;i<count;i++){ let star=$('.star').eq(i) if(i<score){ star.addClass('icon-start-copy').removeClass('icon-star1') }else{ star.addClass('icon-star1').removeClass('icon-start-copy') } }})$('.star').click(function(){ score=$(this).index()+1}) </script>
首先创建一个空的div
在icofont 上找到星星图标
let count=10 let score=5 for(let i=0;i<count;i++){ let star=$('<i/>').addClass('iconfont star') if(i<score){ star.addClass('icon-start-copy') }else{ star.addClass('icon-star1') } $(".container").append(star) }
这一步 先let一个 然后用for循环 每循环添加一个i标签在之前的div里 并且i标签里添加一个星星图标
let count=10的意思是我一共想创建10个星星
let score=5 的意思是没点击的时候有5个星星是亮着的
if(i<score){ star.addClass('icon-start-copy') }else{ star.addClass('icon-star1') }
这是设置一共有10个星 其中5个星是亮着的
最后返回
$('.star').mouseenter(function(){ let index=$(this).index() for(let i=0;i<count;i++){ let star=$('.star').eq(i) if(i<=index){ star.addClass('icon-start-copy').removeClass('icon-star1') }else{ star.addClass('icon-star1').removeClass('icon-start-copy') } }})
当我点击 星星是发生的事件
首先获取点击是对应的下标
再for循环 let一下 来接收此时的i
如果说此时的i小于等于我点击的下标 则 把不亮变成亮的并且删除之前添加的不亮的
$('.star').mouseleave(function(){ for(let i=0;i<count;i++){ let star=$('.star').eq(i) if(i<score){ star.addClass('icon-start-copy').removeClass('icon-star1') }else{ star.addClass('icon-star1').removeClass('icon-start-copy') } }})
同上一个意思 这是我离开的时候星星还是变成我一开始设置的5个星星亮
$('.star').click(function(){ score=$(this).index()+1})
这是我点击之后 星星亮的数量变成我点击的时候的数量
