我正在尝试创建一个;分级墙";这是一个显示人们对一个地方的评价的表格。评级是从JSON文件(ratings.JSON(访问的,然后显示在墙上。我遇到的问题是,我想要这个人给的星级以黄色星星的形式出现在墙上。我使用的过程是:使用for循环来获得所有评级,(它们只是一个数字(1-5(,所以输出看起来像";152423";。我希望每个人评级的每个数字都以星形显示,所以我想要的结果看起来像这样:期望结果
但目前,明星们正在出现,但由于某种原因,美元评级似乎被定义为5。我觉得这与正在解码的JSON和数组形式的$decode[$I]['rating']有关。
如有任何帮助,我们将不胜感激。
以下代码:
<html>
<head>
<link rel="stylesheet" href="comments.css" />
<title>Lonely Bris</title>
</head>
<body>
<table class="table">
<?php
$output = file_get_contents("ratings.json");
$decode = json_decode($output, true);
for($i = 0; $i < count($decode); $i++) {
$decode[$i]['rating'];
$rating = $decode[$i]['rating'];
}
$star = '<div class="rate"><input type="radio" id="star" name="rate"/><label for="star" title="text">1 star</label></div>';
if($rating == 1){
$rating = str_repeat($star, 1);
}
elseif($rating == 2){
$rating = str_repeat($star, 2);
}
elseif($rating == 3){
$rating = str_repeat($star, 3);
}
elseif($rating == 4){
$rating = str_repeat($star, 4);
}
elseif($rating == 5){
$rating = str_repeat($star, 5);
}
else{
$rating = "Unknown.";
}
echo "<tr><th></th><th>Review</th><th>Rating</th><th>Image?</th></tr>";
for($i = 0; $i < count($decode); $i++) {
$imgUrl = $decode[$i]['image'];
echo "<tr class=border_bottom><td>" . "<div class=name>" . $decode[$i]['name'] . "</div>" . " - " . $rating . "<br><br>" . $decode[$i]['review'] . "</td>";
?>
<td><img src="<?php echo $imgUrl; ?>" height="70" width="120" class="img-thumbnail" /></td></tr>
<?php
}
?>
</table>
</body>
</html>
JSON文件(ratings.JSON(
[
{
"name": "James",
"event": "Test",
"review": "Test",
"rating": "5",
"image": "http://localhost/ClassIA3/images/RobloxScreenShot20210104_132131740.png"
},
{
"name": "Sup",
"event": "The Storytellers",
"review": "Test",
"rating": "5",
"image": "http://localhost/ClassIA3/images/RobloxScreenShot20201012_195012147.png"
},
{
"name": "Pont",
"event": "ACTivate children's club for 3-4 years",
"review": "Test",
"rating": "4",
"image": "http://localhost/ClassIA3/images/RobloxScreenShot20210101_181318133.png"
},
{
"name": "Hello2",
"event": "Flexibility and core training",
"review": "Was so good for my core",
"rating": "5",
"image": "http://localhost/ClassIA3/images/RobloxScreenShot20201120_213311711.png"
},
{
"name": "Hello2",
"event": "The Letter 'B'",
"review": "SO Cool",
"rating": "1",
"image": "http://localhost/ClassIA3/images/untitled.png"
},
{
"name": "Sup",
"event": "Dragon boating",
"review": "Origami!",
"rating": "4",
"image": "http://localhost/ClassIA3/images/Capture.PNG"
},
{
"name": "Hello2",
"event": "Brisbane Greeters - Paddington walking tour",
"review": "I loved it!",
"rating": "5",
"image": "http://localhost/ClassIA3/images/OLD TECH ROOMS.jpg"
}
]
有几件事需要修复/改进。
最关键的是,第一个循环中的$rating = $decode[$i]['rating'];
一遍又一遍地覆盖同一个变量$rating
。当循环结束时,$rating
将是在最后一次迭代中访问的值——这就是为什么您总是在样本数据中看到五星。
此外,第一循环中的$decode[$i]['rating'];
什么也不做;只需删除代码行。
为了让动态生成的html更容易阅读,我建议使用一个带有占位符的基本模板字符串——这样你就需要使用插值或串联来混合静态文本和变量。
我不知道您对无线电输入的意图是什么,但id
属性在有效的html文档中必须是唯一的。同一形状的不同恒星之间的name
属性也会发生冲突——再说一遍,我不知道你的意图。
使用css实现样式。使用类设置重复图元的样式。
仅使用html表来显示表格数据。不建议/现代滥用表格作为";网格";通用html布局。
推荐起始代码:(演示(
$rowTemplate = <<<ROWTEMPLATE
<tr class="border_bottom">
<td class="event">%s</td>
<td class="name">%s</td>
<td class="review">%s</td>
<td class="rating">%s</td>
<td><img class="img-thumbnail" src="%s"/></td>
</tr>
ROWTEMPLATE;
?>
<table class="table">
<tr>
<th>Event</th>
<th>Reviewer</th>
<th>Review</th>
<th>Rating</th>
<th>Image?</th>
</tr>
<?php
foreach (json_decode($json) as $obj) {
printf(
$rowTemplate,
$obj->event,
$obj->name,
$obj->review,
$obj->rating,
$obj->image,
);
}
?>
</table>
由此,您可以将printf()
中的$obj->rating
替换为您希望的任何重复图形标记。