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

Question

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

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

Answer 1

这里有一个解决方案,只使用一个非常小而简单的图像和一个自动生成的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;
}

图片

alt text http://www.ulmanen.fi/stuff/stars.png

注意:千万不要热链接上面的图像!将文件复制到您自己的服务器并从那里使用它.

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();
});

产量

图片来自fugue icon set(www.pinvoke.com)http://www.ulmanen.fi/stuff/stars_output.png

演示

http://www.ulmanen.fi/stuff/stars.php

这可能会满足您的需求.使用这种方法,您不必计算任何三分之一或任何星形宽度,只需给它一个浮点数,它就会给你你的星星.

关于星星如何呈现的一个小解释可能是有序的.

该脚本创建两个块级跨度元素.两个跨度最初的尺寸为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精灵技术.

现在,当跨度嵌套时,它们会自动叠加在一起.在默认情况下,当两个跨度的宽度为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));
    });
}

Answer 2

如果您只需要支持现代浏览器,您就可以逃脱:

• 没有图像;
• 主要是静态css;
• 几乎没有jQuery或Javascript;

您只需要将数字转换为a 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>

该解决方案的最大缺点是:

1. 你需要元素内的星星来产生正确的宽度;
2. 没有语义标记,例如,您更喜欢将分数作为元素内的文本;
3. 它只允许你有类的分数(因为我们不能使用Javascript来设置width伪元素的精确度).

为了解决这个问题,可以轻松调整上述解决方案.在:before与:after位需要成为DOM实际元素(所以我们需要一些JS为).

后者留给读者作为练习.

Answer 3

试试这个jquery函数

//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}`);
    });
}

FontAwesome CSS

您可以在http://fontawesome.io/下载FontAwesome.

Answer 4

为什么不只有一个星形的五个单独图像(空,四分之一满,半满,三分之四满和全),然后根据等级的截断或粗略值乘以4将图像注入到DOM中(获得整个季度的数量)？

例如,4.8618164乘以4并且舍入为19,这将是四分之三和四分之三的星.

或者(如果你像我一样懒惰),只需从21中选择一个图像(0星到5星,以四分之一为增量),并根据上述值选择单个图像.然后它只是一个计算,然后是DOM中的图像更改(而不是尝试更改五个不同的图像).

Answer 5

我最终完全没有JS,以避免客户端渲染延迟.为此,我生成这样的HTML:

<span class="stars" title="{value as decimal}">
    <span style="width={value/5*100}%;"/>
</span>

为了帮助提高可访问性,我甚至在title属性中添加原始评级值.