根据评分在前端显示星答案

【问题标题】：Display Star in Front End based on rating根据评分在前端显示星
【发布时间】：2017-11-13 10:46:27
【问题描述】：

我在后端创建了一个字段使用单选按钮选择产品评级为 1 星、2 星、3 星、4 星和 5 星

显示相同时在前端

<p class="tool-tip"><a href="#" onMouseover="ddrivetip('Expert Rating')"; onMouseout="hideddrivetip()">Expert Rating</a> - <?php echo $this->prodDet->v_child_safety?></p>

它将评分以数字形式显示为 - 1 星、2 星、3 星、4 星和 5 星

任何人都可以指导让前端显示星状评级而不是数值而不会使页面加载缓慢的最佳方法

这不是重复的 我只想让用户在前端查看星级评分他们不能修改评级或添加评级，只是管理员将评级分配为 1 星到 5 星，并且在前端可见现在我希望显示星星而不是数值为 2 星或 3 星

谢谢

【问题讨论】：

rateyo.fundoocode.ninja
Star-Rating System html的可能重复
我可以假设 $this->prodDet->v_child_safety 被替换为 1 star 等吗？
@Nimish 我倾向于不同意副本。这不是关于其自身的星级评定系统。它只是关于如何显示星图而不是文本。没有办法知道访问者是否能够给自己打分。
@Ruchika 请回答我上面的问题。 $this->prodDet->v_child_safety 是否替换为 1 star 等？

标签： php jquery html css

【解决方案1】：

此解决方案使用隐藏的单选按钮。多亏了 fontAwesome，该标签被显示为星星。星号的值可以发送到您的 PHP 脚本，或者您可以根据您拥有的任何值设置正确的星号。

input[type="radio"] {
  display: none;
}

label {
  display: inline-block;
}

input[type="radio"]:checked+label {
  cursor: default;
  color: red;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<form>
  <input id="star1" name="star" type="radio">
  <label for="star1"><i class="fa fa-star"></i></label>
  <input id="star2" name="star" type="radio">
  <label for="star2"><i class="fa fa-star"></i></label>
  <input id="star3" name="star" type="radio" checked>
  <label for="star3"><i class="fa fa-star"></i></label>
<!-- Use <?php echo("checked") ?> to set the correct star -->
  <input id="star4" name="star" type="radio">
  <label for="star4"><i class="fa fa-star"></i></label>
  <input id="star5" name="star" type="radio">
  <label for="star5"><i class="fa fa-star"></i></label>
</form>

【讨论】：

你误解了这个问题。他不想得到评级。评级只是后端。他只是希望根据在后端设置的评级在前端加星。编辑：那个反对票不是来自我。您的答案很容易变成一个好的 imo。
我的错。我调整了代码以指示可以在哪里使用 PHP 来设置正确的星号。不知道评级会不会调整。如果没有，可以将其设为只读。
是的 - 我也没有投反对票，为什么我会为想要帮助的人提供帮助，我只想根据价值在前端显示一颗星

【解决方案2】：

首先，确保$this->prodDet->v_child_safety 只返回一个数字。因此，它应该只返回 1、2、3 等，而不是 1 星、2 星。然后用以下代码替换您的代码：

<?php

$stars = (int)$this->prodDet->v_child_safety;
$count = 1;
$result = "";

for($i = 1; $i <= 5; $i++){
    if($stars >= $count){
        $result .= "<span>&#x2605</span>";
    } else {
        $result .= "<span>&#x2606</span>";
    }
    $count++;
}
?>
<p class="tool-tip"><a href="#" onMouseover="ddrivetip('Expert Rating')"; onMouseout="hideddrivetip()">Expert Rating</a> - <?php echo $result?></p>

如果您想使用星星的图像，请使用以下代码：

<?php

$stars = (int)$this->prodDet->v_child_safety;
$result = "";

for($i = 1; $i <= $stars; $i++){
    $result .= "<img src='link_to_image_here.png'/>";
}
?>
<p class="tool-tip"><a href="#" onMouseover="ddrivetip('Expert Rating')"; onMouseout="hideddrivetip()">Expert Rating</a> - <?php echo $result?></p>

【讨论】：

谢谢 - 但它总是在前面显示 5 星，尽管在后端有 1 或 2 或 3 评级。可能是什么问题
@Ruchika 好吧，第一个代码应该显示 5 颗星。 &#x2605 和 &#x2606 是 unicode 字符。第一个是黑色的星星，第二个是带有黑色边框的白色星星。因此，例如，如果评级为 3，则在此之后显示 3 个黑色星和 2 个白色星。如果等级为 4，它将显示 4 个黑色星和 1 个白色星。

【解决方案3】：

在每个输入中使用以下条件：

<?php if($this->prodDet->v_child_safety=="1 star"){?>checked="checked"<?php } ?>

并使用disabled 禁用所有输入，这样如果您只想显示评分，任何人都无法更改值。

div.stars {
  width: 270px;
  display: inline-block;
}

input.star { display: none; }

label.star {
  float: right;
  padding: 10px;
  font-size: 36px;
  color: #444;
  transition: all .2s;
}

input.star:checked ~ label.star:before {
  content: '\2605';
  color: #FD4;
  transition: all .25s;
}

input.star-5:checked ~ label.star:before {
  color: #FE7;
  text-shadow: 0 0 20px #952;
}

input.star-1:checked ~ label.star:before { color: #F62; }

label.star:hover { transform: rotate(-15deg) scale(1.3); }

label.star:before {
  content: '\2605';
}

<p class="tool-tip"><a href="#">Expert Rating</a>
</p>
<div class="stars">
<input disabled class="star star-5" id="star-5" type="radio" name="star"/>
    <label class="star star-5" for="star-5"></label>
    <input disabled class="star star-4" id="star-4" type="radio" name="star" />
    <label class="star star-4" for="star-4"></label>
    <input disabled class="star star-3" id="star-3" type="radio" name="star"/>
    <label class="star star-3" for="star-3"></label>
    <input disabled class="star star-2" id="star-2" type="radio" name="star"/>
    <label class="star star-2" for="star-2"></label>
    <input disabled class="star star-1" id="star-1" type="radio" name="star" checked="checked"/>
    <label class="star star-1" for="star-1"></label>
</div>

【讨论】：

【解决方案4】：

这个问题是关于显示一个值，而不是创建一个输入

有一种非常简单的方法可以支持半星，四舍五入到最接近的一半，使用令人敬畏的字体（代码中的 v4 类，注释中的 v5 类）和一些基本算术

echo $rating;
echo "<span class='stars'>"
for ( $i = 1; $i <= 5; $i++ ) {
    if ( round( $rating - .25 ) >= $i ) {
        echo "<i class='fa fa-star'></i>"; //fas fa-star for v5
    } elseif ( round( $rating + .25 ) >= $i ) {
        echo "<i class='fa fa-star-half-o'></i>"; //fas fa-star-half-alt for v5
    } else {
        echo "<i class='fa fa-star-o'></i>"; //far fa-star for v5
    }
}
echo '</span>';

改变图标的颜色

.stars {
    color: #ff7501;
    font-size: 1.2em;
}

瞧，你得到了一个评分显示

【讨论】：

【解决方案5】：

使用此代码，它非常简单且有用。代码运行成功....

<?php 
    $select=4;
    $a=5-$select;
    $j=1;

    for ($i=1; $i<=$select; $i++) 
    { 
        echo "★"; 
        if($i==$select){
            for ($j=1; $j<=$a; $j++){
                echo "☆";
            }
        }
    }
?>

【讨论】：