利用iconFont文字颜色属性实现电影/商品评分的打分。
css部分:
<style> .star { color: rgb(241, 184, 77); font-size: 30px; cursor: pointer; } </style> html部分: <div class="container"></div> jq部分 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(function () { let count = 10 let score = 5
for (let i = 0; i < count; i++) { let star = $("<i/>").addClass("iconfont").addClass("star") if (i < score) star.addClass("icon-xingxing") else star.addClass("icon-xingxing2") $(".container").append(star) }
$(".star").mouseenter(function () { let index = $(this).index() $(".star").each(function (i) { if (i <= index) $(this).addClass("icon-xingxing").removeClass("icon-xingxing2") else $(this).addClass("icon-xingxing2").removeClass("icon-xingxing") }) }) $(".star").mouseleave(function () { $('.star').each(function (i) { if (i < score) $(this).addClass('icon-xingxing').removeClass('icon-xingxing2') else $(this).addClass('icon-xingxing2').removeClass('icon-xingxing') }) })
$(".star").click(function(){ score = $(this).index() + 1 })
}) </script>