我在循环中有一个值列表。我需要将所有这些值变为精确的5星评级。我搜索了很多，但我无法得到我需要的确切答案。
我试过这个：Turn a number into star rating display using jQuery and CSS
但它只适用于单一价值。 考虑我的代码是这样的：
<?php
$a=0;
while($a<5)
{
echo "<input type=text value=$a><br/>";
//need to display star rating here
$a=$a+1.2;
}
?>
它只是一个例子。我想将文本框中的所有值转换为星级。在我原来的代码中，我从数据库中获取了一个循环的值。请帮我这样做。
此代码适用于单个值。
<html>
<head>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function() {
$('p').html('<span class="stars">'+parseFloat($('input[name=amount]').val())+'</span>');
$('span.stars').stars();
});
$.fn.stars = function() {
return $(this).each(function() {
$(this).html($('<span />').width(Math.max(0, (Math.min(5, parseFloat($(this).html())))) * 16));
});
}
</script>
<style type="text/css">
span.stars, span.stars span {
display: block;
background: url(image/stars.png) 0 -16px repeat-x;
width: 80px;
height: 16px;
}
span.stars span {
background-position: 0 0;
}
</style>
</head>
<body>
<input type="text" name="amount" value="4" />
<p>
<span class="stars">2.4618164</span></p>
</body>
</html>
但我不知道如何为值循环做这件事。
答案 0 :(得分：2)
您也可以在不使用jquery的情况下执行此操作。你只需要使用
<div class="star-box" style="display: inline-block;width:auto ;white-space: nowrap;">
<span class="unfilled" style="color:#d3d3d3; position: absolute;top: 0;left: 0;">★★★★★</span>
<span class="filled" style="color:#e9ce18; white-space: nowrap; overflow: hidden;position: absolute;top: 0;left: 0;width:12.8px">★★★★★</span>
</div>
这里＆amp;＃9733是白星的十六进制代码，＆amp;＃9734是html中黑星的十六进制代码。颜色灰色分配给未填充的星星，黄色分配给填充的星星。我们使用绝对定位使星星相互重叠。填写的课程放在未填写的课程之上。未填充星星的宽度是自动的。显示的填充星数取决于您为填充类指定的宽度。
答案 1 :(得分：1)
使用JSFiddle代码作为基础知识。 你的PHP应该是这样的:(假设$ a包含星值）
<?php
$a=0;
while($a<5)
{
echo '<span class="stars">'.$a.'</span>';
$a=$a+1.2;
}
?>
由于我不确定你的while循环你想要什么，似乎你也可以使用for循环，这将是一个更好的选择。但这取决于你当然需要什么循环。
总计应该是这样的：
<html>
<head>
<style type="text/css">
span.stars, span.stars span {
display: block;
background: url(http://www.ulmanen.fi/stuff/stars.png) 0 -16px repeat-x;
width: 80px;
height: 16px;
}
span.stars span {
background-position: 0 0;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" />
<script type="text/javascript">
$.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);
});
}
$( document ).ready(function() {
$('span.stars').stars();
});
</script>
</head>
<body>
<?php
$a=0;
while($a<5)
{
echo '<span class="stars">'.$a.'</span>';
$a=$a+1.2;
}
?>
</body>
答案 2 :(得分：0)
如果要将数字转换为星星，则可以使用它。只需要做的就是通过数据库数字更改宽度
.containerdiv {
border: 0;
float: left;
position: relative;
width: 300px;
}
.cornerimage {
border: 0;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
img {
max-width: 300px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="containerdiv">
<div>
<img src="https://image.ibb.co/jpMUXa/stars_blank.png" alt="img">
</div>
<div class="cornerimage" style="width:50%;">
<img src="https://image.ibb.co/caxgdF/stars_full.png" alt="">
</div>
<div>
答案 3 :(得分：0)
您也可以这样做，这也是示例代码
var starMap = {
'0.5': 'half',
'1': '1',
'1.5': '1 and a half',
'2': '2',
'2.5': '2 and a half',
'3': '3',
'3.5': '3 and a half',
'4': '4',
'4.5': '4 and a half',
'5': '5'
}
function roundToHalf(value) {
return Math.round(value * 2) / 2;
}
function convertToString(value) {
return Number(value).toString();
}
function setStarRating(value) {
var fieldValue = starMap[convertToString(roundToHalf(value))];
$("input[name=rating][value='" + fieldValue + "']").attr('checked', 'checked');
}
$(document).ready(function() {
var value = 4.4;
setStarRating(value);
});.rating_widgets {
display: flex;
margin-top: 25px;
}
.rating {
border: none;
float: left;
}
.rating>input {
display: none;
}
.rating>label:before {
margin: 5px;
font-size: 24px;
font-family: FontAwesome;
display: inline-block;
content: "\f005";
}
.rating>.half:before {
content: "\f089";
position: absolute;
}
.rating>label {
color: #ddd;
float: right;
}
.rating>input:checked~label,
.rating:not(:checked),
.rating:not(:checked) {
color: #FFD700;
}
.rating>input:checked,
.rating>input:checked,
.rating>input:checked~label,
.rating>input:checked~label {
color: #FFED85;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/a2e210f715.js"></script>
<div class="rating_widgets">
<fieldset class="rating">
<input type="radio" id="star5" name="rating" />
<label class="full" for="star5" title="Awesome - 5 stars"></label>
<input type="radio" id="star4half" name="rating" value="4 and a half" />
<label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
<input type="radio" id="star4" name="rating" value="4" />
<label class="full" for="star4" title="Pretty good - 4 stars"></label>
<input type="radio" id="star3half" name="rating" value="3 and a half" />
<label class="half" for="star3half" title="Good - 3.5 stars"></label>
<input type="radio" id="star3" name="rating" value="3" />
<label class="full" for="star3" title="Good - 3 stars"></label>
<input type="radio" id="star2half" name="rating" value="2 and a half" />
<label class="half" for="star2half" title="ok - 2.5 stars"></label>
<input type="radio" id="star2" name="rating" value="2" />
<label class="full" for="star2" title="ok - 2 stars"></label>
<input type="radio" id="star1half" name="rating" value="1 and a half" />
<label class="half" for="star1half" title="Bad - 1.5 stars"></label>
<input type="radio" id="star1" name="rating" value="1" />
<label class="full" for="star1" title="Very bad - 1 star"></label>
<input type="radio" id="starhalf" name="rating" value="half" />
<label class="half" for="starhalf" title="Very bad - 0.5 stars"></label>
</fieldset>
</div>