我一直在研究 jquery 插件，并且想知道如何调整该插件以将数字（如 4.8618164）变成 4.8618164 颗星，填充为 5。基本上将数字 <5 解释为使用 jQuery 填充的 5 星评级系统中的星/JS/CSS。
请注意，这只会显示/显示来自现有数字的星级评分，而不接受新的评分提交。
问问题
152159 次
8 回答
256
这是一个适合您的解决方案，只使用一个非常小而简单的图像和一个自动生成的 span 元素：
CSS
span.stars, span.stars span {
display: block;
background: url(stars.png) 0 -16px repeat-x;
width: 80px;
height: 16px;
}
span.stars span {
background-position: 0 0;
}
图片
（来源：ulmanen.fi）
注意：不要热链接到上面的图片！将文件复制到您自己的服务器并从那里使用它。
jQuery
$.fn.stars = function() {
return $(this).each(function() {
// Get the value
var val = parseFloat($(this).html());
// Make sure that the value is in 0 - 5 range, multiply to get width
var size = Math.max(0, (Math.min(5, val))) * 16;
// Create stars holder
var $span = $('<span />').width(size);
// Replace the numerical value with stars
$(this).html($span);
});
}
如果您想将星星限制为只有一半或四分之一的星星大小，请在该行之前添加以下行之一var size：
val = Math.round(val * 4) / 4; /* To round to nearest quarter */
val = Math.round(val * 2) / 2; /* To round to nearest half */
HTML
<span class="stars">4.8618164</span>
<span class="stars">2.6545344</span>
<span class="stars">0.5355</span>
<span class="stars">8</span>
用法
$(function() {
$('span.stars').stars();
});
输出
（来源：ulmanen.fi）
演示
这可能会满足您的需求。使用这种方法，您不必计算任何四分之三或诸如此类的星宽，只需给它一个浮点数，它就会给您您的星星。
关于星星如何呈现的一个小解释可能是有序的。
该脚本创建两个块级跨度元素。两个跨度最初的大小都是 80px * 16px 和一个背景图像 stars.png。跨度是嵌套的，因此跨度的结构如下所示：
<span class="stars">
<span></span>
</span>
外跨度background-position为0 -16px。这使得外跨中的灰色星星可见。由于外部跨度的高度为 16px 和repeat-x，它只会显示 5 个灰色星。
另一方面，内部跨度有一个background-position，0 0其中只有黄色的星星可见。
这当然适用于两个单独的图像文件，star_yellow.png 和 star_gray.png。但是由于星星的高度是固定的，我们可以很容易地将它们组合成一张图像。这利用了CSS sprite 技术。
现在，由于跨度是嵌套的，它们会自动相互覆盖。默认情况下，当两个 span 的宽度都是 80px 时，黄色的星星完全遮住了灰色的星星。
但是当我们调整内跨的宽度时，黄色星星的宽度减小了，露出了灰色的星星。
可访问性方面，将浮点数留在内部跨度内并用 隐藏它会更明智text-indent: -9999px，这样关闭 CSS 的人至少会看到浮点数而不是星号。
希望这有点道理。
更新于 2010 年 10 月 22 日
现在更紧凑，更难理解！也可以压缩成一个衬里：
$.fn.stars = function() {
return $(this).each(function() {
$(this).html($('<span />').width(Math.max(0, (Math.min(5, parseFloat($(this).html())))) * 16));
});
}
于 2010-01-01T00:09:33.643 回答
37
如果你只需要支持现代浏览器，你可以摆脱：
- 没有图像；
- 主要是静态 css；
- 几乎没有 jQuery 或 Javascript；
您只需要将数字转换为class，例如class='stars-score-50'。
首先是“渲染”标记的演示：
body { font-size: 18px; }
.stars-container {
position: relative;
display: inline-block;
color: transparent;
}
.stars-container:before {
position: absolute;
top: 0;
left: 0;
content: '★★★★★';
color: lightgray;
}
.stars-container:after {
position: absolute;
top: 0;
left: 0;
content: '★★★★★';
color: gold;
overflow: hidden;
}
.stars-0:after { width: 0%; }
.stars-10:after { width: 10%; }
.stars-20:after { width: 20%; }
.stars-30:after { width: 30%; }
.stars-40:after { width: 40%; }
.stars-50:after { width: 50%; }
.stars-60:after { width: 60%; }
.stars-70:after { width: 70%; }
.stars-80:after { width: 80%; }
.stars-90:after { width: 90%; }
.stars-100:after { width: 100; }Within block level elements:
<div><span class="stars-container stars-0">★★★★★</span></div>
<div><span class="stars-container stars-10">★★★★★</span></div>
<div><span class="stars-container stars-20">★★★★★</span></div>
<div><span class="stars-container stars-30">★★★★★</span></div>
<div><span class="stars-container stars-40">★★★★★</span></div>
<div><span class="stars-container stars-50">★★★★★</span></div>
<div><span class="stars-container stars-60">★★★★★</span></div>
<div><span class="stars-container stars-70">★★★★★</span></div>
<div><span class="stars-container stars-80">★★★★★</span></div>
<div><span class="stars-container stars-90">★★★★★</span></div>
<div><span class="stars-container stars-100">★★★★★</span></div>
<p>Or use it in a sentence: <span class="stars-container stars-70">★★★★★</span> (cool, huh?).</p>然后是一个使用少量代码的演示：
$(function() {
function addScore(score, $domElement) {
$("<span class='stars-container'>")
.addClass("stars-" + score.toString())
.text("★★★★★")
.appendTo($domElement);
}
addScore(70, $("#fixture"));
});body { font-size: 18px; }
.stars-container {
position: relative;
display: inline-block;
color: transparent;
}
.stars-container:before {
position: absolute;
top: 0;
left: 0;
content: '★★★★★';
color: lightgray;
}
.stars-container:after {
position: absolute;
top: 0;
left: 0;
content: '★★★★★';
color: gold;
overflow: hidden;
}
.stars-0:after { width: 0%; }
.stars-10:after { width: 10%; }
.stars-20:after { width: 20%; }
.stars-30:after { width: 30%; }
.stars-40:after { width: 40%; }
.stars-50:after { width: 50%; }
.stars-60:after { width: 60%; }
.stars-70:after { width: 70%; }
.stars-80:after { width: 80%; }
.stars-90:after { width: 90%; }
.stars-100:after { width: 100; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Generated: <div id="fixture"></div>该解决方案的最大缺点是：
- 您需要元素内的星星来生成正确的宽度；
- 没有语义标记，例如，您更喜欢将分数作为元素内的文本；
- 它只允许与你的课程一样多的分数（因为我们不能
width使用 Javascript 来设置伪元素的精确值）。
要解决此问题，可以轻松调整上述解决方案。:before和:after位需要成为 DOM 中的实际元素（因此我们需要一些 JS）。
后者留给读者作为练习。
于 2016-01-22T15:36:31.823 回答
25
试试这个 jquery 帮助函数/文件
jquery.Rating.js
//ES5
$.fn.stars = function() {
return $(this).each(function() {
var rating = $(this).data("rating");
var fullStar = new Array(Math.floor(rating + 1)).join('<i class="fas fa-star"></i>');
var halfStar = ((rating%1) !== 0) ? '<i class="fas fa-star-half-alt"></i>': '';
var noStar = new Array(Math.floor($(this).data("numStars") + 1 - rating)).join('<i class="far fa-star"></i>');
$(this).html(fullStar + halfStar + noStar);
});
}
//ES6
$.fn.stars = function() {
return $(this).each(function() {
const rating = $(this).data("rating");
const numStars = $(this).data("numStars");
const fullStar = '<i class="fas fa-star"></i>'.repeat(Math.floor(rating));
const halfStar = (rating%1!== 0) ? '<i class="fas fa-star-half-alt"></i>': '';
const noStar = '<i class="far fa-star"></i>'.repeat(Math.floor(numStars-rating));
$(this).html(`${fullStar}${halfStar}${noStar}`);
});
}
索引.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Star Rating</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="js/jquery.Rating.js"></script>
<script>
$(function(){
$('.stars').stars();
});
</script>
</head>
<body>
<span class="stars" data-rating="3.5" data-num-stars="5" ></span>
</body>
</html>
于 2016-08-30T06:55:54.993 回答
7
为什么不只拥有五张单独的星星图像（空的、四分之一满的、半满的、四分之三的和满的）然后只根据等级的截断或粗化值乘以 4 将图像注入到您的 DOM 中（获得季度的整数）？
例如，4.8618164 乘以 4 并四舍五入为 19，即四分之三星。
或者（如果你像我一样懒惰），只需从 21 中选择一张图像（0 星到 5 星，以四分之一为增量），然后根据上述值选择单张图像。然后它只是一个计算，然后是 DOM 中的图像更改（而不是尝试更改五个不同的图像）。
于 2010-01-01T00:06:39.843 回答
5
我最终完全没有 JS，以避免客户端渲染延迟。为此，我生成这样的 HTML：
<span class="stars" title="{value as decimal}">
<span style="width={value/5*100}%;"/>
</span>
为了提高可访问性，我什至在 title 属性中添加了原始评分值。
于 2015-03-29T02:22:02.820 回答
4
使用没有原型的jquery，将js代码更新为
$( ".stars" ).each(function() {
// Get the value
var val = $(this).data("rating");
// Make sure that the value is in 0 - 5 range, multiply to get width
var size = Math.max(0, (Math.min(5, val))) * 16;
// Create stars holder
var $span = $('<span />').width(size);
// Replace the numerical value with stars
$(this).html($span);
});
我还在跨度中添加了一个名为 data-rating 的数据属性。
<span class="stars" data-rating="4" ></span>
于 2015-03-27T20:02:49.033 回答
4
您只能使用 2 张图像来完成。1 个空白星，1 个填充星。
在另一个的顶部覆盖填充图像。并将评级数字转换为百分比并将其用作填充图像的宽度。
.containerdiv {
border: 0;
float: left;
position: relative;
width: 300px;
}
.cornerimage {
border: 0;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
img{
max-width: 300px;
}
于 2017-06-11T07:47:29.400 回答
1
这是我使用 JSX 和字体真棒的看法，但仅限于 0.5 精度：
<span>
{Array(Math.floor(rating)).fill(<i className="fa fa-star"></i>)}
{(rating) - Math.floor(rating)==0 ? ('') : (<i className="fa fa-star-half"></i>)}
</span>
第一行是全星，第二行是半星（如果有的话）
于 2019-01-31T15:25:44.620 回答