Question

我在后端创建了一个字段在哪里使用单选按钮我选择产品的评级为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星，我想要在

中显示星星

由于

Answer 1

首先，确保$this->prodDet->v_child_safety仅返回一个数字。所以不是1星，2星，它应该只返回1,2,3等。然后用这个替换你的代码：

<?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>

Answer 2

此解决方案使用隐藏的单选按钮。由于fontAwesome，标签呈现为明星。星号的值可以发送到您的PHP脚本，也可以根据您拥有的任何值设置正确的星号。

＆＃13;

input[type="radio"] {
  display: none;
}

label {
  display: inline-block;
}

input[type="radio"]:checked+label {
  cursor: default;
  color: red;
}

＆＃13;

<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>

＆＃13;

Answer 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>

Answer 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;
}

瞧瞧，您获得了一个评分显示

Answer 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 "☆";
            }
        }
    }
?>

根据评级在前端显示星标

5 个答案: