在前端开发中，经常需要用到五星评价功能。本文将介绍如何使用jQuery和CSS实现这种评价功能，具体来说是基于图层的方式。
1. 实现思路
我们可以使用5个图层来表示每个星星。当用户鼠标悬停在一个星星上时，我们将高亮该星星及其之前的星星。如果用户点击了某个星星，我们将记录他们所选的星星数，并将其提交到后端进行处理。
具体来说，我们将使用以下技术：
- HTML：创建星星容器。
- CSS：为星星添加样式，包括正常状态、高亮状态和已选择状态。
- jQuery：为星星添加交互行为，例如鼠标悬停和点击事件。
2. HTML结构
首先，让我们看一下HTML代码：
---- ---------------
---- ---------------------
---- --------------------
------
------rating类是星星容器的父级元素，star-wrapper类是星星图层的父级元素，stars类表示一个星星。我们将使用CSS样式将它们布局成五个并排的星星。
3. CSS样式
接下来，为星星添加CSS样式：
------------- - -------- ------------- --------- --------- --------- ------- ------ ------ ------- ----- - ------ - -------- ------ ---------- -- ------------ ------- --------- --------- ---- -- ----- -- ------- ----- ------ ----- ----------- -------------- --------- - ------------- ------------ - ------ - -------------------- - ------ - -------------- ------------- - ------ - -------------------- - ------ -
.star-wrapper类用于包含五个星星。.stars类用于表示单个星星，font-size设置为0可以避免星星之间有空隙。- 当用户将鼠标悬停在某个星星上时，我们需要将该星星及其之前的所有星星高亮，使用CSS选择器
~实现这一效果。 - 当用户点击某个星星时，我们需要将该星星及其之前的所有星星标记为已选中状态，同样使用CSS选择器。
注意：这里我们使用了一个名为 stars.png 的背景图片，这个图片包含三个状态下的星星，正常状态、高亮状态和已选择状态，分别对应 background-position 的三个值：0 0，0 -25px 和 0 -50px。
4. jQuery交互
最后，让我们使用jQuery为星星添加交互行为：
---------------------------- -
--------------------------- ---------- -
---------------------------
-------------------------------------
---
-------------------------- ---------- -
------------------------------
----------------------------------------
---
----------------------- ---------- -
-----------------------------
-------------------------------------------
---
---$(document).ready()方法用于确保页面上的所有元素都加载完毕后才执行JavaScript代码。- 当用户将鼠标悬停在某个星星上时，我们使用
addClass()方法为该星星及其之前的所有星星添加active类，从而实现高亮效果。类似地，当用户将鼠标移开时，我们使用removeClass()方法去除active类，取消高亮状态。 - 当用户点击某个星星时，
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/2944