猿问
下载APP

使用jQuery和CSS将数字转换为星级评分显示

使用jQuery和CSS将数字转换为星级评分显示

我一直在寻找jquery插件,并想知道如何调整该插件将数字(如4.8618164)转换为4.8618164星星填充5.基本上将数字<5转换为使用jQuery填充在5星评级系统中的星号/ JS / CSS。

请注意,这只会显示/显示已经可用数字的星级,而不接受新的评级提交。


POPMUISE
浏览 59回答 3
3回答

波斯汪

这里有一个解决方案,只使用一个非常小而简单的图像和一个自动生成的span元素:CSSspan.stars,&nbsp;span.stars&nbsp;span&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;block; &nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;url(stars.png)&nbsp;0&nbsp;-16px&nbsp;repeat-x; &nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;80px; &nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;16px;}span.stars&nbsp;span&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;background-position:&nbsp;0&nbsp;0;}图片(来源:ulmanen.fi)注意:千万不要热链接上面的图像!将文件复制到您自己的服务器并从那里使用它。jQuery的$.fn.stars&nbsp;=&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;$(this).each(function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Get&nbsp;the&nbsp;value &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;val&nbsp;=&nbsp;parseFloat($(this).html()); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Make&nbsp;sure&nbsp;that&nbsp;the&nbsp;value&nbsp;is&nbsp;in&nbsp;0&nbsp;-&nbsp;5&nbsp;range,&nbsp;multiply&nbsp;to&nbsp;get&nbsp;width &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;size&nbsp;=&nbsp;Math.max(0,&nbsp;(Math.min(5,&nbsp;val)))&nbsp;*&nbsp;16; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Create&nbsp;stars&nbsp;holder &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;$span&nbsp;=&nbsp;$('<span&nbsp;/>').width(size); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Replace&nbsp;the&nbsp;numerical&nbsp;value&nbsp;with&nbsp;stars &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(this).html($span); &nbsp;&nbsp;&nbsp;&nbsp;});}如果要将星形限制为仅一半或四分之一星大小,请在行前添加以下行之一var size:val&nbsp;=&nbsp;Math.round(val&nbsp;*&nbsp;4)&nbsp;/&nbsp;4;&nbsp;/*&nbsp;To&nbsp;round&nbsp;to&nbsp;nearest&nbsp;quarter&nbsp;*/val&nbsp;=&nbsp;Math.round(val&nbsp;*&nbsp;2)&nbsp;/&nbsp;2;&nbsp;/*&nbsp;To&nbsp;round&nbsp;to&nbsp;nearest&nbsp;half&nbsp;*/HTML<span&nbsp;class="stars">4.8618164</span><span&nbsp;class="stars">2.6545344</span><span&nbsp;class="stars">0.5355</span><span&nbsp;class="stars">8</span>用法$(function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;$('span.stars').stars();});产量(来源:ulmanen.fi)演示http://www.ulmanen.fi/stuff/stars.php这可能会满足您的需求。使用这种方法,您不必计算任何三分之一或任何星形宽度,只需给它一个浮点数,它就会给你你的星星。关于星星如何呈现的一个小解释可能是有序的。该脚本创建两个块级跨度元素。两个跨度最初的尺寸为80px * 16px,背景图像为stars.png。跨度是嵌套的,因此跨度的结构如下所示:<span&nbsp;class="stars"> &nbsp;&nbsp;&nbsp;&nbsp;<span></span></span>外跨度得到了background-position的0 -16px。这使得外跨度中的灰色星可见。由于外跨度高度为16px&nbsp;repeat-x,因此只显示5颗灰星。在另一方面内宽度具有background-position的0 0,这使得只有黄色星星可见。这当然适用于两个独立的图像文件,star_yellow.png和star_gray.png。但由于恒星具有固定的高度,我们可以轻松地将它们组合成一个图像。这利用了CSS精灵技术。现在,当跨度嵌套时,它们会自动叠加在一起。在默认情况下,当两个跨度的宽度为80px时,黄色星星完全遮蔽灰色星星。但是当我们调整内跨的宽度时,黄色恒星的宽度会减小,从而显示出灰色的恒星。可访问性方面,将浮点数保留在内部跨度内并将其隐藏起来会更明智text-indent: -9999px,因此关闭CSS的人至少会看到浮点数而不是星号。希望这有点道理。现在更紧凑,更难理解!也可以挤到一个衬里:$.fn.stars&nbsp;=&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;$(this).each(function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(this).html($('<span&nbsp;/>').width(Math.max(0,&nbsp;(Math.min(5,&nbsp;parseFloat($(this).html()))))&nbsp;*&nbsp;16)); &nbsp;&nbsp;&nbsp;&nbsp;});}

噜噜哒

试试这个jquery helper函数/文件jquery.Rating.js//ES5$.fn.stars&nbsp;=&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;$(this).each(function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;rating&nbsp;=&nbsp;$(this).data("rating"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;fullStar&nbsp;=&nbsp;new&nbsp;Array(Math.floor(rating&nbsp;+&nbsp;1)).join('<i&nbsp;class="fas&nbsp;fa-star"></i>'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;halfStar&nbsp;=&nbsp;((rating%1)&nbsp;!==&nbsp;0)&nbsp;?&nbsp;'<i&nbsp;class="fas&nbsp;fa-star-half-alt"></i>':&nbsp;''; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;noStar&nbsp;=&nbsp;new&nbsp;Array(Math.floor($(this).data("numStars")&nbsp;+&nbsp;1&nbsp;-&nbsp;rating)).join('<i&nbsp;class="far&nbsp;fa-star"></i>'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(this).html(fullStar&nbsp;+&nbsp;halfStar&nbsp;+&nbsp;noStar); &nbsp;&nbsp;&nbsp;&nbsp;});}//ES6$.fn.stars&nbsp;=&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;$(this).each(function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;rating&nbsp;=&nbsp;$(this).data("rating"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;numStars&nbsp;=&nbsp;$(this).data("numStars"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;fullStar&nbsp;=&nbsp;'<i&nbsp;class="fas&nbsp;fa-star"></i>'.repeat(Math.floor(rating)); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;halfStar&nbsp;=&nbsp;(rating%1!==&nbsp;0)&nbsp;?&nbsp;'<i&nbsp;class="fas&nbsp;fa-star-half-alt"></i>':&nbsp;''; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;noStar&nbsp;=&nbsp;'<i&nbsp;class="far&nbsp;fa-star"></i>'.repeat(Math.floor(numStars-rating)); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(this).html(`${fullStar}${halfStar}${noStar}`); &nbsp;&nbsp;&nbsp;&nbsp;});}的index.html&nbsp;&nbsp;&nbsp;<!DOCTYPE&nbsp;html> &nbsp;&nbsp;&nbsp;&nbsp;<html&nbsp;lang="en"> &nbsp;&nbsp;&nbsp;&nbsp;<head> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<meta&nbsp;charset="UTF-8"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<meta&nbsp;name="viewport"&nbsp;content="width=device-width,&nbsp;initial-scale=1.0"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<meta&nbsp;http-equiv="X-UA-Compatible"&nbsp;content="ie=edge"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<title>Star&nbsp;Rating</title> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<link&nbsp;href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css"&nbsp;rel="stylesheet"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<script&nbsp;src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<script&nbsp;src="js/jquery.Rating.js"></script> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<script> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(function(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('.stars').stars(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</script> &nbsp;&nbsp;&nbsp;&nbsp;</head> &nbsp;&nbsp;&nbsp;&nbsp;<body> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span&nbsp;class="stars"&nbsp;data-rating="3.5"&nbsp;data-num-stars="5"&nbsp;></span> &nbsp;&nbsp;&nbsp;&nbsp;</body> &nbsp;&nbsp;&nbsp;&nbsp;</html>

一只萌萌小番薯

这是我使用JSX和字体真棒,仅限于.5精度,但:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{Array(Math.floor(rating)).fill(<i&nbsp;className="fa&nbsp;fa-star"></i>)} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{(rating)&nbsp;-&nbsp;Math.floor(rating)==0&nbsp;?&nbsp;('')&nbsp;:&nbsp;(<i&nbsp;className="fa&nbsp;fa-star-half"></i>)}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>第一排是整星,第二排是半星(如果有的话)
打开App,查看更多内容
随时随地看视频慕课网APP
我要回答