使用JQuery/CSS或PHP/CSS将数据转换为图像。（评级制度）

--链接已删除--

如何使用Jquery将上述网站中的数字转换为星星，使用for循环添加多少星星，并使用向上取整和向下取整函数

我更喜欢使用以下示例进行取整：

• 如果低于3.25，则为3.0；这将包括3颗全星，2颗空星
• 3.5如果介于3.25和3.75之间；这将包括3颗全明星和1颗半明星 星星，1颗空星星
• 如果高于3.75，则为4.0；这将包括4颗全星，1颗空星

---

您需要将您的评级列表更新到一个可选择的容器中，并且需要将半径封装在它自己的选择器中

HTML:

整体评级数据（无星级）：3.14285714286
总体地面数据（无星）：3.14285714286
总体价格数据（无星）：3.14285714286
总体员工数据（无星级）：3
总体维护数据（无星）：2.85714285714
总体噪声数据（无星）：3.42857142857
总体设施数据（无星级）：3.57142857143
总体位置数据（无星星）：3.28571428571
总体停车数据（无星）：3.28571428571
总体安全数据（无星级）：3

JS:

$（文档）.ready（函数（）{
$（'ul.li'）。每个（函数（）{
var$el=$（本）；
var评级=$el.find（'span'）.text（）；
变量$stars=$（''）；
var满分=数学下限（额定值）；
var半星=假；
var剩余=评级-满分；
如果（余数>=0.25和余数0.75）{
全_星+=1；
}   
$stars.find（'div:lt（'+full_stars+'））.addClass（'star'）；
if（半星）{
$stars.find（'div:eq（'+full_stars+'））.addClass（'half-star'）；
}
$el.find（'span'）。替换为（$stars）；
});
});

我将把CSS留给你

---

编辑：更新了

$stars

以使用

而不是

@martswite:它在示例站点链接上声明他被视为现有的评级系统。谢谢。我会让你知道结果的。嘿，我几乎有这个，但是span:lt和span:eq不能正常工作。我不得不用div替换上面的跨度，因为星星没有显示出来。为了测试它是否有效，我尝试了$stars.find（'div:lt（3）'）.addClass（'full-star'）；它只显示空的星星。我会寻找其他方法进行lt，但如果你有任何建议，请按我的方式发送。你是否在JS运行后使用firefug检查源代码，以查看应用了哪些更改？正如我所说，它显示的是空星，但没有找到受影响的星并将其替换为全星。为了测试的目的，我暂时省略了半星。从您的代码来看，它应该可以工作，但我不确定为什么不能\根据您的示例，我已经更新了使用div而不是span的代码。问题是您没有将star div封装在它自己的div中。因此，
：eq
和
：gt
没有要查找的子元素。
<ul class="ratings">
  <li>Overall Rating Data (no stars): <span>3.14285714286</span></li>
  <li>Overall Grounds Data (no stars): <span>3.14285714286</span></li>
  <li>Overall Price Data (no stars): <span>3.14285714286</span></li>
  <li>Overall Staff Data (no stars): <span>3</span></li>
  <li>Overall Maintenance Data (no stars): <span>2.85714285714</span></li>
  <li>Overall Noise Data (no stars): <span>3.42857142857</span></li>
  <li>Overall Amenities Data (no stars): <span>3.57142857143</span></li>
  <li>Overall Location Data (no stars): <span>3.28571428571</span></li>
  <li>Overall Parking Data (no stars): <span>3.28571428571</span></li>
  <li>Overall Safety Data (no stars): <span>3</span></li>
</ul>

$(document).ready(function() {
  $('ul.ratings li').each(function() {
    var $el = $(this);
    var rating = $el.find('span').text();
    var $stars = $('<div><div class="ratings-stars"></div><div class="ratings-stars"></div><div class="ratings-stars"></div><div class="ratings-stars"></div><div class="ratings-stars"></div></div>');
    var full_stars = Math.floor(rating);
    var half_star = false;
    var remainder = rating - full_stars;

    if(remainder >= 0.25 && remainder <= 0.75) {
      half_star = true;
    } else if(remainder > 0.75) {
      full_stars += 1;
    }   

    $stars.find('div:lt('+full_stars+')').addClass('star');
    if(half_star) {
      $stars.find('div:eq('+full_stars+')').addClass('half-star');
    }

    $el.find('span').replaceWith($stars);
  });
});