Я создал поле в бэкэнд, где с помощью переключателя выбираю рейтинг продукта как 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 звезды, я хочу, чтобы звезды отображались в
благодаря
Во-первых, убедитесь, что $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>★</span>"; } else { $result .= "<span>☆</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>
Это решение использует скрытые переключатели. Метка отображается в виде звезды благодаря 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>
Для каждого входа используйте условие ниже:
<?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>