本文介绍如何使用JavaScript实现星级评价组件。核心功能包括鼠标悬停时星星随位置高亮、点击后锁定当前评分并禁用悬停效果，以及支持重新点击同一星星以更换评分。通过HTML结构结合CSS样式与JS事件监听，实现简洁直观的交互体验。
星级评价组件开发思路
初次开发星级评价组件时，曾尝试通过CSS手工绘制五角星形状，导致样式代码冗长且维护困难。对比发现，直接利用Unicode字符★即可实现图形展示，这种方法更为高效简洁。
以下是该功能的实际运行效果示意图：
核心交互逻辑说明
尽管实现逻辑相对基础，但在开发过程中仍需注意以下关键交互细节：
首先，在未点击状态下，鼠标悬停（hover）时，星星应随鼠标移动依次高亮显示，提供视觉反馈。
其次，用户点击确认后，需立即关闭悬停高亮效果，保持当前选中状态的稳定。
最后，允许用户再次点击已选中的星星，此时系统应允许更改评分颜色，实现评分的动态调整。
代码实现与总结
以下是完整的代码实现示例：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<style type="text/css">
.stars{
white-space: nowrap;
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
}
.stars li{
display: inline-block;
color: #ADADAD;
font-size: 40px;
}
</style>
<body>
<ul class="stars">
<li>★</li>
<li>★</li>
<li>★</li>
<li>★</li>
<li>★</li>
</ul>
<script src="../../js/common/jquery-git.js"></script>
<script>
$(function() {
//为星星设置hover效果
var isClicked = false;
var beforeClickedIndex = -1;
var clickNum = 0; //点击同一颗星次数
$('li').hover(
function() {
if(!isClicked) {
$(this).css('color', '#F0AD4E');
var index = $(this).index();
for(var i = 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;
var index = $(this).index();
for(var i = 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;
}
});
});
</script>
</body>
</html>综上所述，该方案通过简单的DOM操作与事件绑定，实现了完整的星级交互逻辑。
以上为JavaScript实现星级评价功能的完整介绍，希望能对开发者有所帮助。如有任何疑问或建议，欢迎留言交流，小编将及时回复。