【发布时间】:2020-03-03 18:56:41
【问题描述】:
我在循环中有一个值列表。我需要将所有这些值转换为准确的 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>
但我不知道如何为值循环执行此操作。
【问题讨论】:
-
为什么要将 $a 增加 1.2?
-
请显示完整代码(您尝试过的 PHP 和 javascript 代码)
-
@atmd 只是为了查看我在所有方面的评分(仅作为示例)。
-
@Casper 请检查我编辑过的问题
-
我在jsfiddle 中修复了这个问题。但是,我不确定你想要什么样的循环。请检查 jsfiddle 并举例说明您尝试实现的循环。
标签: javascript jquery css jquery-ui rating