Fontawesome有一个很棒的星级 CSS 扩展，看起来真的很棒。
然而，点击任何 span 元素并不会真正做任何事情。我不知道如何将它与我的数据库模型挂钩。假设我在 Django 中有一个 0-5 的整数字段。如何根据用户在模板中的选择设置值？
<span class="rating">
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
</span>
我最终使用了Raty。如果您正在寻找一个简单而干净的解决方案，我发现这是最简单的。
$('#star').raty('score'); // Get the current score.
我看过这篇文章，但不想使用超出我需要的插件。所以，我把这个放在一起做一个我正在做的小项目。你不需要引导程序来使用它。
HTML
<div class="star-rating">
<span class="fa fa-star-o" data-rating="1"></span>
<span class="fa fa-star-o" data-rating="2"></span>
<span class="fa fa-star-o" data-rating="3"></span>
<span class="fa fa-star-o" data-rating="4"></span>
<span class="fa fa-star-o" data-rating="5"></span>
<input type="hidden" name="whatever" class="rating-value" value="3">
</div>
CSS
.star-rating {
line-height:32px;
font-size:1.25em;
cursor: pointer;
}
咖啡脚本
$star_rating = $('.star-rating .fa')
SetRatingStar = ->
$star_rating.each ->
if parseInt($star_rating.siblings('input.rating-value').val()) >= parseInt($(this).data('rating'))
$(this).removeClass('fa-star-o').addClass('fa-star')
else
$(this).removeClass('fa-star').addClass('fa-star-o')
$star_rating.on 'click', ->
$star_rating.siblings('input.rating-value').val $(this).data('rating')
SetRatingStar()
SetRatingStar()
Javascript：
var $star_rating = $('.star-rating .fa');
var SetRatingStar = function() {
return $star_rating.each(function() {
if (parseInt($star_rating.siblings('input.rating-value').val()) >= parseInt($(this).data('rating'))) {
return $(this).removeClass('fa-star-o').addClass('fa-star');
} else {
return $(this).removeClass('fa-star').addClass('fa-star-o');
}
});
};
$star_rating.on('click', function() {
$star_rating.siblings('input.rating-value').val($(this).data('rating'));
return SetRatingStar();
});
SetRatingStar();
我没有看到仅使用引导 glyphicons 和 jquery 的简单答案。我相信其他人来这里是为了快速复制和粘贴，所以我只写了一个。
$(function(){
$('.rating-select .btn').on('mouseover', function(){
$(this).removeClass('btn-default').addClass('btn-warning');
$(this).prevAll().removeClass('btn-default').addClass('btn-warning');
$(this).nextAll().removeClass('btn-warning').addClass('btn-default');
});
$('.rating-select').on('mouseleave', function(){
active = $(this).parent().find('.selected');
if(active.length) {
active.removeClass('btn-default').addClass('btn-warning');
active.prevAll().removeClass('btn-default').addClass('btn-warning');
active.nextAll().removeClass('btn-warning').addClass('btn-default');
} else {
$(this).find('.btn').removeClass('btn-warning').addClass('btn-default');
}
});
$('.rating-select .btn').click(function(){
if($(this).hasClass('selected')) {
$('.rating-select .selected').removeClass('selected');
} else {
$('.rating-select .selected').removeClass('selected');
$(this).addClass('selected');
}
});
});<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rating-select">
<div class="btn btn-default btn-sm"><span class="glyphicon glyphicon-star-empty"></span></div>
<div class="btn btn-default btn-sm"><span class="glyphicon glyphicon-star-empty"></span></div>
<div class="btn btn-default btn-sm"><span class="glyphicon glyphicon-star-empty"></span></div>
<div class="btn btn-default btn-sm"><span class="glyphicon glyphicon-star-empty"></span></div>
<div class="btn btn-default btn-sm"><span class="glyphicon glyphicon-star-empty"></span></div>
</div>要使用 django 模板从数据库中设置默认值，请为每个明星执行以下操作：
<div class="btn btn-{% if rate.value > 0 %}warning{% else %}default{% endif %}{% if rate.value == 1 %} selected{% endif %} btn-sm"><span class="glyphicon glyphicon-star-empty"></span></div>
另一种有趣的方法。纯 CSS，保留选定值，使用单选按钮（酷！）和 FA 字体
取自这篇文章
HTML
<div class="star-rating">
<div class="star-rating__wrap">
<input class="star-rating__input" id="star-rating-5" type="radio" name="rating" value="5">
<label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-5" title="5 out of 5 stars"></label>
<input class="star-rating__input" id="star-rating-4" type="radio" name="rating" value="4">
<label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-4" title="4 out of 5 stars"></label>
<input class="star-rating__input" id="star-rating-3" type="radio" name="rating" value="3">
<label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-3" title="3 out of 5 stars"></label>
<input class="star-rating__input" id="star-rating-2" type="radio" name="rating" value="2">
<label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-2" title="2 out of 5 stars"></label>
<input class="star-rating__input" id="star-rating-1" type="radio" name="rating" value="1">
<label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-1" title="1 out of 5 stars"></label>
</div>
</div>
CSS
.star-rating{
font-size: 0;
}
.star-rating__wrap{
display: inline-block;
font-size: 1rem;
}
.star-rating__wrap:after{
content: "";
display: table;
clear: both;
}
.star-rating__ico{
float: right;
padding-left: 2px;
cursor: pointer;
color: #FFB300;
}
.star-rating__ico:last-child{
padding-left: 0;
}
.star-rating__input{
display: none;
}
.star-rating__ico:hover:before,
.star-rating__ico:hover ~ .star-rating__ico:before,
.star-rating__input:checked ~ .star-rating__ico:before
{
content: "\f005";
}
您可以查看我使用各种可配置选项创建的Bootstrap JQuery Star 评级插件（其中包含场景演示）。它尽可能多地使用 CSS3，但也使用 JQuery（如果你同意的话）。您可以通过插件方法轻松获取星级或设置。
使用 Bootstrap 3.x 字形图标，包括 RTL 支持，支持插件事件和方法。该插件还支持任何部分填充的星星。你可以参考这里的来源。
如果您热衷于使用 Font-Awesome，您可以覆盖插件 CSS 以在项目中使用 Font-Awesome 而不是 Bootstrap Glyphicons。
HTML
<div>Rating Star - Function CallBack onChange</div>
<div class="well well-sm">
<span id="rating_1" class="rating" ></span>
<span id="result_1"></span>
</div>
<div>Rating Star - No Editable</div>
<div class="well well-sm">
<span id="rating_2" class="rating" data-val="2.49" data-stars='6' data-change="false"></span>
<span>Calificaste con <b>2.49</b> de <b>6</b> Estrellas</span>
</div>
<div>Rating Star - Tamaño - Data Html options -- Hidden input</div>
<div class="well well-sm">
<span id="rating_3" class="rating" data-val="2.49" data-stars='10' data-input=".rating-value" data-change="true" style="font-size:35px;" >
<input type="hidden" name="whatever3" class="rating-value" size="5" />
</span>
</div>
<div>Rating Star - javascript Options - input text</div>
<div class="well well-sm">
<span id="rating_4" class="rating">
<input type="text" name="whatever4" id="rating_val" size="1" readOnly="readOnly" />
</span>
<span id="result_4"> de <b>10</b> estrellas </span>
</div>
JavaScript
$('#rating_1').RatingStar(
{callback:function(val){$('#result_1').html(" "+val+" estrella(s).")}}
);
$('#rating_2').RatingStar();
$('#rating_3').RatingStar();
$('#rating_4').RatingStar({
val:4.95,
stars:10,
input:'#rating_val',
change:true
});
var $star_rating = $('.rating .star');
var SetRatingStar = function() {
return $star_rating.each(function() {
var puan = document.formname.whatever.value;
if ( parseInt($(this).data('rating')) <= puan) {
return $(this).removeClass('star').addClass('star filled');
} else {
return $(this).removeClass('star filled').addClass('star');
}
});
};
$star_rating.on('click', function() {
document.formname.whatever.value=$(this).data('rating');
return SetRatingStar();
});
.rating{unicode-bidi:bidi-override;direction:rtl;font-size:10px;}
.rating span.star{font-family:FontAwesome;font-weight:normal;font-style:normal;display:inline-block}
.rating span.star:hover{cursor:pointer}
.rating span.star:before{content:"\f006";padding-right:5px;color:#999}
.rating span.star:hover:before,.rating span.star:hover~span.star:before{content:"\f005";color:#e3cf7a}
.rating span.star.filled {}
.rating span.star.filled:before{content:"\f005";color:#e3cf7a; }
<span class="rating" style="font-size:20px;">
<span class="star" data-rating="5"></span><span class="star" data-rating="4"></span><span class="star" data-rating="3"></span><span class="star" data-rating="2"></span><span class="star" data-rating="1"></span></span>
看看django-ratings - 这就是你要找的。
考虑来自 CssTricks 的使用很少 CSS 的星级评分。它不使用图像，不使用 Bootstrap，不使用 Javascript。纯 CSS 和 Unicode 星号，见这个。除 IE <= 6 之外的所有浏览器都支持。
注意：UI 不需要 Javascript，但在向服务器发送数据并在元素失去焦点后保留评分选择时需要。
还可以看看Accessible star rating widget with pure CSS。它也是一个纯 CSS。使用此处讨论的技术 -使用 CSS 自定义单选和复选框输入。它与第一个不同之处在于，在元素失去焦点后评级保持选中状态。不幸的是，较少的浏览器支持它。
在阅读时，关于CSS 选择器的快速说明可能会很有用。
更新：
刚刚重读了帖子并单击了链接。我的答案中的第一个链接与主题启动器的相同。道歉。
无论如何，我选择不删除答案，因为它包含一些我很高兴找到并且可能对其他人有用的链接。
这是一个更好的解决方案。星星仅基于数字，因此搜索引擎和浏览器仅读取4.5 分（满分 5分），仅此而已。它使用我自己的自定义字体；没有 JS，没有 SVG，没有 Flash，没有 Canvas。它也可用作进度条。
这里的代码，没有微格式标签，使其更简单：
Rating: <span class="star-rating-icons">
<strong>3.5</strong> out of <i>5</i>
</span>
这是包含字体和相关样式的 CSS：
.star-rating-icons {
font-family: seostars;
font-size: 1.2em;
line-height: .6em;
position: relative;
width: 5em;
text-indent: -5000px;
display: inline-block;
font-style: normal;
}
.star-rating-icons strong {
font-weight: normal;
display: block;
position: absolute;
left: 0px;
color: #FC0;
font-family: seostars;
text-indent: 0;
}
.star-rating-icons strong:first-letter {
font-weight: bold;
position: absolute;
left: 0px;
font-style: normal;
}
.star-rating-icons i {
color: #666;
position: absolute;
text-indent: 0;
color: #666;
left: 0;
}
基本上，评级的第一个字母被格式化为一个包含整颗星的字符，以及带有部分星的小数。星星的轮廓是由句号组成的，尽管它可以应用于任何其他在场的角色。（通过编辑字体或仅使用伪元素）