[英]Star rating system hover
Currently I'm making a rating system for a webshop. 目前我正在为网上商店制作评级系统。 Basically how I want it to work: 基本上我希望它如何工作:
If visitor never rated before: 如果访客从未评价过:
I'm using font awesome so I'm not using any images. 我使用字体很棒,所以我没有使用任何图像。 The problem now is that if I hover over a star, it works, but if I want to move from star to star it glitches (because there's a little gap between the stars and it means it'll reset the stars first). 现在的问题是,如果我将鼠标悬停在一颗恒星上,它会起作用,但是如果我想从一颗恒星移动到另一颗恒星,它就会出现故障(因为恒星之间有一点间隙,这意味着它会首先重置恒星)。
jsfiddle: https://jsfiddle.net/uappvz3y/ jsfiddle: https ://jsfiddle.net/uappvz3y/
JS: JS:
var current_star_statusses = [];
star_elements = $('.fa-star');
star_elements.each(function(i, elem)
{
current_star_statusses.push($(elem).hasClass('yellow'));
});
star_elements.mouseenter(changeRatingStars);
star_elements.mouseleave(resetRatingStars);
/**
* Changes the rating star colors when hovering over it.
*/
function changeRatingStars()
{
// Current star hovered
var star = $(this);
// Removes all colors first from all stars
$('.fa-star').removeClass('gray').removeClass('yellow');
// Makes the current hovered star yellow
star.addClass('yellow');
// Makes the previous stars yellow and the next stars gray
star.parent().prevAll().children('.fa-star').addClass('yellow');
star.parent().nextAll().children('.fa-star').addClass('gray');
}
/**
* Resets the rating star colors when not hovered anymore.
*/
function resetRatingStars()
{
star_elements.each(function(i, elem)
{
$(elem).removeClass('yellow').removeClass('gray').addClass(current_star_statusses[i] ? 'yellow' : 'gray');
});
}
HTML: HTML:
<ul class="list-inline rating-list">
<li><i class="fa fa-star yellow"></i></li>
<li><i class="fa fa-star yellow"></i></li>
<li><i class="fa fa-star yellow"></i></li>
<li><i class="fa fa-star yellow"></i></li>
<li><i class="fa fa-star gray"></i></li>
</ul>
CSS: CSS:
.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);
}
I know there are a lot of libraries that makes it easier but I'd like to keep it my own code if I can. 我知道有很多库可以让它变得更容易但是如果可以的话我想保留它自己的代码。
I changed these 4 lines of code. 我改变了这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);
So now the star_element
is the li
. 所以现在star_element
就是li
。
Also if you pref jsfiddle, here is a link 此外,如果你pref jsfiddle,这里是一个链接
var current_star_statusses = []; 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); /** * Changes the rating star colors when hovering over it. */ function changeRatingStars() { // Current star hovered var star = $(this); // Removes all colors first from all stars $('.fa-star').removeClass('gray').removeClass('yellow'); // Makes the current hovered star yellow star.addClass('yellow'); // Makes the previous stars yellow and the next stars gray star.parent().prevAll().children('.fa-star').addClass('yellow'); star.parent().nextAll().children('.fa-star').addClass('gray'); } /** * Resets the rating star colors when not hovered anymore. */ function resetRatingStars() { star_elements.each(function(i, elem) { $(elem).removeClass('yellow').removeClass('gray').addClass(current_star_statusses[i] ? 'yellow' : 'gray'); }); }
.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); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <ul class="list-inline rating-list"> <li><i class="fa fa-star yellow"></i></li> <li><i class="fa fa-star yellow"></i></li> <li><i class="fa fa-star yellow"></i></li> <li><i class="fa fa-star yellow"></i></li> <li><i class="fa fa-star gray"></i></li> </ul>
You can make stars rating using pure CSS. 您可以使用纯CSS制作星级。 Float stars to right, and apply hover effect for li
that has padding. 将星形浮动到右侧,并对具有填充的li
应用悬停效果。
.rating-list li { float: right; color: #ddd; padding: 10px 5px; } .rating-list li:hover, .rating-list li:hover ~ li { color: #ffd700; } .rating-list { display: inline-block; list-style: none; }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <ul class="list-inline rating-list"> <li><i class="fa fa-star" title="Rate 5"></i></li> <li><i class="fa fa-star" title="Rate 4"></i></li> <li><i class="fa fa-star" title="Rate 3"></i></li> <li><i class="fa fa-star" title="Rate 2"></i></li> <li><i class="fa fa-star" title="Rate 1"></i></li> </ul>
There is a much simpler solution: use paddings on the .fa
elements instead, and use float: left
for the list items, which means that there will be no spacing between each star. 有一个更简单的解决方案:在.fa
元素上使用填充,并使用float: left
作为列表项,这意味着每个星之间不会有间距。
These few rules are sufficient to achieve the effect you intend to do: 这几条规则足以达到您打算做的效果:
.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;
}
Here is a proof-of-concept example, leaving your JS code unchanged: 这是一个概念验证示例,保持JS代码不变:
$(function() { var current_star_statusses = []; star_elements = $('.fa-star'); star_elements.each(function(i, elem) { current_star_statusses.push($(elem).hasClass('yellow')); }); star_elements.mouseenter(changeRatingStars); star_elements.mouseleave(resetRatingStars); /** * Changes the rating star colors when hovering over it. */ function changeRatingStars() { // Current star hovered var star = $(this); // Removes all colors first from all stars $('.fa-star').removeClass('gray').removeClass('yellow'); // Makes the current hovered star yellow star.addClass('yellow'); // Makes the previous stars yellow and the next stars gray star.parent().prevAll().children('.fa-star').addClass('yellow'); star.parent().nextAll().children('.fa-star').addClass('gray'); } /** * Resets the rating star colors when not hovered anymore. */ function resetRatingStars() { star_elements.each(function(i, elem) { $(elem).removeClass('yellow').removeClass('gray').addClass(current_star_statusses[i] ? 'yellow' : 'gray'); }); } });
.fa-star:before { content: "\\f005"; } .rating-list li i.yellow { color: #FFD700; } .rating-list li i.gray { color: #bbb; } .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; } .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); }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="list-inline rating-list"> <li><i class="fa fa-star yellow"></i></li> <li><i class="fa fa-star yellow"></i></li> <li><i class="fa fa-star yellow"></i></li> <li><i class="fa fa-star yellow"></i></li> <li><i class="fa fa-star gray"></i></li> </ul>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.