for (let i = 0; i < count; i++) { let star = $('<i/>').addClass('iconfont star') if (i < score) { star.addClass('icon-xingxing1') //实心星星 } else { star.addClass('icon-xingxing') //空心星星 } $('.container').append(star) }
这里利用for循环是为了遍历所有的星星 以便处理鼠标在其上方的样式
通过score(可根据需求更改)判断初始的实心星星数量$('.container').append(star)是给body.container里添加i标签 整个循环框架每循环一次添加一个i标签
// $('.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-xingxing1').removeClass('icon-xingxing') // } else { // star.addClass('icon-xingxing').removeClass('icon-xingxing1') // } // } // })
在整个循环体中 if执行语句是为了当鼠标在星星上方的时候给星星添加样式
