在Web开发中，我们经常需要实现一些用户评级的功能，其中包括星级评分。本文将介绍如何使用JavaScript来实现一个简单的星级评分效果。
HTML结构
首先，我们需要创建一个HTML结构来展示星级评分。我们可以使用一组带有不同样式的星星来表示不同的评分级别。下面是一个简单的HTML结构示例：
<div class="star-rating">
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
</div>
在这个例子中，我们使用了一个具有.star-rating类的<div>元素作为星级评分的父容器，然后在这个容器中创建了五个具有.star类的<span>元素作为星星的显示。
CSS样式
接下来，我们需要使用CSS样式来美化星级评分。我们可以将未选中的星星设置为灰色，而选中的星星设置为黄色。下面是一个基本的CSS样式示例：
.star-rating {
unicode-bidi: bidi-override;
direction: rtl;
text-align: center;
}
.star-rating .star {
display: inline-block;
font-size: 25px;
color: #ccc;
cursor: pointer;
}
.star-rating .star.active,
.star-rating .star:hover {
color: #ffcc00;
}
通过设置unicode-bidi: bidi-override和direction: rtl，我们可以确保星星以正确的顺序排列。每个星星应该具有.star类，并且在被选中或悬停时，其颜色应该变为黄色。
JavaScript交互
最后，我们需要使用JavaScript来实现星级评分的交互功能。我们可以为每个星星添加点击事件处理程序，以便用户可以根据他们的选择来改变评分级别。下面是一个简单的JavaScript代码示例：
const stars = document.querySelectorAll('.star-rating .star');
stars.forEach(star => {
star.addEventListener('click', function() {
this.classList.add('active');
this.previousAll().forEach(prevStar => prevStar.classList.add('active'));
this.nextAll().forEach(nextStar => nextStar.classList.remove('active'));
});
star.addEventListener('mouseover', function() {
this.classList.add('active');
this.previousAll().forEach(prevStar => prevStar.classList.add('active'));
});
star.addEventListener('mouseout', function() {
this.classList.remove('active');
this.nextAll().forEach(nextStar => nextStar.classList.remove('active'));
});
});
// Helper functions
Element.prototype.previousAll = function() {
const siblings = Array.from(this.parentNode.children);
return siblings.slice(0, siblings.indexOf(this)).reverse();
};
Element.prototype.nextAll = function() {
const siblings = Array.from(this.parentNode.children);
return siblings.slice(siblings.indexOf(this) + 1);
};
在这个例子中，我们首先使用document.querySelectorAll('.star-rating .star')选择所有星星，并使用.forEach()迭代它们。接下来，我们为每个星星添加三个事件处理程序：
click事件处理程序会在用户点击星星时触发。它会为被点击的星星及其前面的星星添加active类，并移除其后面的星星的active类。mouseover事件处理程序会在用户将鼠标悬停在星星上时触发。它会为被悬停的星星及其前面的星星添加active类。mouseout事件处理程序会在用户将鼠标移出星星时触发。它会移除所有星星的active类，除了被点击的星星及其前面的星星。
我们还定义了两个辅助函数Element.prototype.previousAll()和Element.prototype.nextAll()，用于获取当前元素之前和之后的兄弟节点。
总结
通过使用HTML、CSS和JavaScript，我们可以轻松地实现一个简单的星级评分效果。用户可以通过点击或悬停在星星上来选择评分级别，而JavaScript代码会根据用户的选择来更新星星的显示效果。
希望本文对你理解如何使用JavaScript实现星级评分效果有所帮助！
本文来自极简博客，作者：墨色流年，转载请注明原文链接：使用JavaScript实现简单的星级评分效果
