我在循环中有一个值列表。我需要将所有这些值转换为准确的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;
}
?>
仅作为示例。我想将文本框中的所有值转换为星级。在我的原始代码中，我正在从DB中获取值的循环。请帮助我做到这一点。
此代码适用于单个值。
<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>
但是我不知道该如何进行值循环。
您也可以不使用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>
这里＆＃9733是白星的十六进制代码，而＆＃9734是html中黑星的十六进制代码。灰色分配给未填充的星星，黄色分配给已填充的星星。而且我们正在使用绝对位置，以使恒星彼此重叠。填充类位于未填充类的顶部。空星的宽度是自动的。显示的实心星星取决于您为实心类别指定的宽度。
使用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>
如果您想将数字转换为星号，则可以使用它。只需要做的就是通过数据库数字更改其宽度
.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>