--链接已删除--
我如何使用Jquery将上述网站中的数字转换为星号?Jquery带有一个for循环,可以添加任意多个星号,以及一个向上取整、向下取整函数。
我更喜欢使用这个例子:
- 3.0,如果低于3.25;这将包括3颗星,2颗星
- 3.5,如果在3.25和3.75之间;这将包括3颗星和1颗星星形,1个空星形
- 如果高于3.75,则为4.0;这将包括4颗星,1颗星
您需要将评级列表更新到可选择的容器中,并且rading需要封装在自己的选择器中。
HTML:
<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>
JS:
$(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);
});
});
CSS我将留给你。
编辑:更新$stars
以使用<div />
而不是<span />