javascript — Звезды рейтинговой системы не отображаются в соответствии с номером

Question

javascript — Звезды рейтинговой системы не отображаются в соответствии с номером

IMGУ меня есть проблема, которую я не могу решить. Я делаю систему рейтинга, и какой бы самый высокий рейтинг из 5 не был в последней статье, каждая статья получает то, что отображается в звездах. Я не знаю, что я делаю неправильно, и мне было интересно, если кто-то может проверить это спасибо.
IMG: https://gyazo.com/61e0a1638821e1bf542f372a30ea8ee1

Код довольно большой, поэтому я включу важные вещи.

<?php
$query = $db->query("SELECT article.id,article.title, AVG(ratings.rates) AS rating
FROM article LEFT JOIN ratings ON article.title = ratings.title
GROUP BY article.id")

while ($show = mysqli_fetch_array($query)) {
echo "<a href='rate.php?id=".$show['id']."&title=".$show['title']."'><h1>".$show['title']."</h1></a><ul>
<li><label for='rating_1' class='rating1'><i class='fas fa-star'></i></label><input type='radio' name='ratings' id='rating_1' value='1'></li>
<li><label for='rating_2' class='rating2'><i class='fas fa-star'></i></label><input type='radio' name='ratings' id='rating_2' value='2'></li>
<li><label for='rating_3' class='rating3'><i class='fas fa-star'></i></label><input type='radio' name='ratings' id='rating_3' value='3'></li>
<li><label for='rating_4' class='rating4'><i class='fas fa-star'></i></label><input type='radio' name='ratings' id='rating_4' value='4'></li>
<li><label for='rating_5' class='rating5'><i class='fas fa-star'></i></label><input type='radio' name='ratings' id='rating_5' value='5'></li>
</ul>";
echo "".round($show['rating'])."";
$number= $show['rating'];

echo "<script language='javascript'>
if ($number>=1) {
$('.rating1').css({'color':'blue'});
}
if ($number>=2) {
$('.rating2').css({'color':'blue'});
}
if ($number>=3) {
$('.rating3').css({'color':'blue'});
}
if ($number>=4) {
$('.rating4').css({'color':'blue'});
}
if ($number>=5) {
$('.rating5').css({'color':'blue'});
}
</script>
";
}
?>

-1

css html javascript jquery php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

У вас есть одинаковые классы для каждой строки. Итак, все строки принимают значения последнего $number, Вы можете включить идентификатор, как это, чтобы сделать все по-другому:

while ($show = mysqli_fetch_array($query)) {

echo "<a href='rate.php?id=".$show['id']."&title=".$show['title']."'><h1>".$show['title']."</h1></a><ul>
<li><label for='rating_1' class='rating1_".$show['id']."'><i class='fas fa-star'></i></label><input type='radio' name='ratings' id='rating_1' value='1'></li>
<li><label for='rating_2' class='rating2_".$show['id']."'><i class='fas fa-star'></i></label><input type='radio' name='ratings' id='rating_2' value='2'></li>
<li><label for='rating_3' class='rating3_".$show['id']."'><i class='fas fa-star'></i></label><input type='radio' name='ratings' id='rating_3' value='3'></li>
<li><label for='rating_4' class='rating4_".$show['id']."'><i class='fas fa-star'></i></label><input type='radio' name='ratings' id='rating_4' value='4'></li>
<li><label for='rating_5' class='rating5_".$show['id']."'><i class='fas fa-star'></i></label><input type='radio' name='ratings' id='rating_5' value='5'></li>
</ul>";
echo "".round($show['rating'])."";
$number= $show['rating'];

echo "<script language='javascript'>
if ($number>=1) {
$('.rating1_".$show['id']."').css({'color':'blue'});
}
if ($number>=2) {
$('.rating2_".$show['id']."').css({'color':'blue'});
}
if ($number>=3) {
$('.rating3_".$show['id']."').css({'color':'blue'});
}
if ($number>=4) {
$('.rating4_".$show['id']."').css({'color':'blue'});
}
if ($number>=5) {
$('.rating5_".$show['id']."').css({'color':'blue'});
}
</script>
";
}

Также у вас есть несколько раз один и тот же идентификатор и должно быть:

echo "<li><label for='rating_1_".$show['id']."' class='rating1_".$show['id']."'><i class='fas fa-star'></i></label><input type='radio' name='ratings' id='rating_1_".$show['id']."' value='1'></li>"

1