Javascript 明星评级系统悬停

目前我正在为一家网店制作评级系统。基本上我希望它如何工作：

如果访客以前从未评级：

• 参观者在一颗星星上盘旋
• 上一个和当前的星星将是黄色的，下一个星星将是灰色的（与类一起完成）
• 如果访客离开悬停，将所有星星重置为旧状态
• 如果访问者点击一个星号，保存它，计算下一个星号值并更新数组

我使用的字体很棒，所以我没有使用任何图像。现在的问题是，如果我将鼠标悬停在一颗星上，它会工作，但如果我想从一颗星移动到另一颗星，它会出现小故障（因为两颗星之间有一个小间隙，这意味着它会先重置这些星）

jsfiddle：

JS:

HTML:

---

我知道有很多库可以让它更简单，但如果可以的话，我想保留自己的代码。

我更改了这4行代码

star_elements = $('.fa-star').parent();

star_elements.find(".fa-star").each(function(i, elem) {
  current_star_statusses.push($(elem).hasClass('yellow'));
});

star_elements.find(".fa-star").mouseenter(changeRatingStars);
star_elements.find(".fa-star").mouseleave(resetRatingStars);

所以现在

star\u元素

就是

li

另外，如果您首选jsfiddle，这里有一个

var当前状态=[]；
星型元素=$（'.fa星型'）.parent（）；
星型元素。查找（“.fa星”）。每个（函数（i，元素）{
当前状态为.push（$（elem）.hasClass（'yellow'）；
});
星型元素。查找（“.fa星”）。鼠标指针（可变星型）；
星型元素。查找（“.fa-star”）.mouseleave（重置星型）；
/**
*将鼠标悬停在星号上方时更改星号的颜色。
*/
函数转换星号（）{
//当前的恒星盘旋
var star=$（本）；
//首先从所有星星中删除所有颜色
$（'fa star'）.removeClass（'灰色'）.removeClass（'黄色'）；
//使当前悬停的星为黄色
star.addClass（“黄色”）；
//使前一颗星为黄色，下一颗星为灰色
star.parent（）.prevAll（）.children（'.fa-star'）.addClass（'yellow'）；
star.parent（）.nextAll（）.children（'.fa-star'）.addClass（'gray'）；
}
/**
*当不再悬停时，重置分级星形颜色。
*/
函数重置STARS（）{
星型元素。每个（功能（i，元素）{
$（elem）.removeClass（'yellow'）.removeClass（'gray'）.addClass（当前状态[i]？'yellow'：'gray'）；
});
}

.fa星：之前{
内容：“\f005”；
}
.评级表李一黄色{
颜色：#FFD700；
}
.评级表李一格雷{
颜色：#bbb；
}
.list inline>li{
显示：内联块；
右侧填充：5px；
左侧填充：5px；
}
.评级表李{
填充：0px；
}
法兰西{
显示：内联块；
字体：普通14px/1字体；
字体大小：继承；
文本呈现：自动；
-webkit字体平滑：抗锯齿；
-moz osx字体平滑：灰度；
变换：平移（0,0）；
}

您可以使用纯CSS进行星级评级。向右浮动星星，并对具有填充的

li

应用悬停效果

。评级列表li{
浮动：对；
颜色：#ddd；
填充：10px 5px；
}
.分级列表李：悬停，
.分级列表li：悬停~li{
颜色：#ffd700；
}
.评级表{
显示：内联块；
列表样式：无；
}

有一个简单得多的解决方案：在

.fa

元素上使用填充，在列表项上使用

float:left

，这意味着每个星之间没有间隔

以下几条规则足以达到您想要达到的效果：

.list-inline {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
.list-inline > li {
  float: left;
}
.rating-list li {
  padding: 0px;
}
.rating-list li .fa {
  padding-right: 5px;
}

下面是一个概念验证示例，保持JS代码不变：

$（函数（）{
var当前状态=[]；
星_元素=$（'.fa星'）；
星型元素。每个（功能（i，元素）{
当前状态为.push（$（elem）.hasClass（'yellow'）；
});
星型元件。鼠标指针（可变星型）；
星型元素。鼠标移动（重置星型）；
/**
*将鼠标悬停在星号上方时更改星号的颜色。
*/
函数转换星号（）{
//当前的恒星盘旋
var star=$（本）；
//首先从所有星星中删除所有颜色
$（'fa star'）.removeClass（'灰色'）.removeClass（'黄色'）；
//使当前悬停的星为黄色
star.addClass（“黄色”）；
//使前一颗星为黄色，下一颗星为灰色
star.parent（）.prevAll（）.children（'.fa-star'）.addClass（'yellow'）；
star.parent（）.nextAll（）.children（'.fa-star'）.addClass（'gray'）；
}
/**
*当不再悬停时，重置分级星形颜色。
*/
函数重置STARS（）{
星型元素。每个（功能（i，元素）{
$（elem）.removeClass（'yellow'）.removeClass（'gray'）.addClass（当前状态[i]？'yellow'：'gray'）；
});
}
});
.fa星：之前{
内容：“\f005”；
}
.评级表李一黄色{
颜色：#FFD700；
}
.评级表李一格雷{
颜色：#bbb；
}
.内联列表{
列表样式：无；
填充：0；
保证金：0；
溢出：隐藏；
}
.list inline>li{
浮动：左；
}
.评级表李{
填充：0px；
}
.评级表{
右侧填充：5px；
}
法兰西{
显示：内联块；
字体：普通14px/1字体；
字体大小：继承；
文本呈现：自动；
-webkit字体平滑：抗锯齿；
-moz osx字体平滑：灰度；
变换：平移（0,0）；
}







谢谢，这正是我需要的！我会尽快接受答案。干杯我很乐意提供帮助，祝您愉快CSS+单选按钮在没有任何JS的情况下也能很好地发挥作用：
.fa-star:before {
    content: "\f005";
}

.rating-list li i.yellow {
    color: #FFD700;
}

.rating-list li i.gray {
    color: #bbb;
}

.list-inline>li {
    display: inline-block;
    padding-right: 5px;
    padding-left: 5px;
}

.rating-list li {
    padding: 0px;
}
.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
}

star_elements = $('.fa-star').parent();

star_elements.find(".fa-star").each(function(i, elem) {
  current_star_statusses.push($(elem).hasClass('yellow'));
});

star_elements.find(".fa-star").mouseenter(changeRatingStars);
star_elements.find(".fa-star").mouseleave(resetRatingStars);

.list-inline {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
.list-inline > li {
  float: left;
}
.rating-list li {
  padding: 0px;
}
.rating-list li .fa {
  padding-right: 5px;
}