在网购时，我们经常会看到商品评价中使用星级评分的形式。在淘宝上，这种评分形式尤为常见。有时，我们可能需要在自己的网站或应用中实现类似的评分功能。那么，如何使用 JavaScript 实现仿淘宝评价评分功能呢？本文将详细介绍实现过程，并提供示例代码。
准备工作
在开始编写代码之前，我们需要先了解一下要用到的 HTML 和 CSS 代码。在本文中，我们将使用以下 HTML 和 CSS 代码：
-- -------------------- ---- -------
---- -------------
----------------
--- --------------
--- ------------ --------------------
--- ------------ --------------------
--- ------------ --------------------
--- ------------ --------------------
--- ------------ --------------------
-----
-------- -------------------- ---- ------- ----- - -------- ----- ------------ ------- - ------ - ---------------- ----- ------- -- -------- -- -------- ----- ------------ ------- - ----- - ------ ----- ------- ----- ----------------- -------------- ------- -------- - ------------ ------------ - -------------------- ----- -- -
以上 HTML 代码定义了一个评分区域，包括一个标题和一组星形元素。每个星形元素都有一个 data-score 属性，用于表示该星形元素所代表的分数。CSS 代码则为这些元素定义样式，包括星形背景图片、鼠标悬停效果等。
实现过程
接下来，让我们开始编写 JavaScript 代码，实现仿淘宝评价评分功能。
首先，我们需要获取所有的星形元素，并为它们添加点击事件监听器。当用户点击某个星形元素时，我们需要将该元素之前的所有元素设为已选中状态（即添加 .active 类），并将该元素及其之后的所有元素设为未选中状态（即移除 .active 类）。同时，我们还需要将当前选中的分数记录在变量中，以备后续使用。
-- -------------------- ---- -------
----- ----- - -----------------------------------
--- ------------ - --
-------------------- -- -
------------------------------ -- -- -
----- ----- - -----------------------------
------------ - ------
----------------- -- -
-- ---------------- -- ------ -
--------------------------
- ---- -
-----------------------------
-
---
---
---然而，上述代码存在一个问题：如果用户只是想取消当前的选中状态，应该怎么做呢？如果用户再次点击当前已选中的星形元素，程序会将该元素之前的所有元素设为已选中状态，从而导致评分结果错误。因此，我们需要对代码进行一些改进。
改进的方法有很多种，这里我们使用一个标记变量 cancelled 来判断用户是否想要取消当前的选中状态。具体实现如下：
-- -------------------- ---- -------
----- ----- - -----------------------------------
--- ------------ - --
--- --------- - ------
-------------------- -- -
------------------------------ -- -- -
----- ----- - -----------------------------
-- ------ --- ------------ -- ----------- - -- --------
--------------------------------
------------ - --
--------- - -----
- ---- - -- ------
------------ - ------
----------------- -- -
-- ---------------- -- ------ -
--------------------------
- ---- -
-----------------------------
-
---
---------
- ---------------------------------------------------------- --------
--------------------------------------------------------------------------------