Javascript 评级系统星星没有按照其编号显示

我有一个我无法解决的问题。我正在制作一个评分系统，无论最后一篇文章的5分中有什么最高的评分，每一篇文章都会以星星的形式显示出来。我不知道我做错了什么，我想知道是否有人可以检查一下谢谢。 img：

代码相当大，所以我将包括重要的东西

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

---

每行都有相同的类。因此，所有行都采用最后一个
$number
的值。您可以包括这样的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_".$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>
    ";
}

while（$show=mysqli\u fetch\u数组（$query））{
回声“






”；
回音“.圆形（$show['rating']）”；
$number=$show['rating']；
回声“
如果（$number>=1）{
$（'.rating1.'.$show['id'].'）.css（{'color'：'blue'}）；
}
如果（$number>=2）{
$（'.rating2.'.$show['id'].'）.css（{'color'：'blue'}）；
}
如果（$number>=3）{
$（'.rating3.'.$show['id'].'）.css（{'color'：'blue'}）；
}
如果（$number>=4）{
$（'.rating4.'.$show['id'].'）.css（{'color'：'blue'}）；
}
如果（$number>=5）{
$（'.rating5.'.$show['id'].'）.css（{'color'：'blue'}）；
}
";
}

此外，您有多次相同的id，并且应该：

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

echo“
”
oh我忘了包括$number=$show['rating']；为什么要使用js？为什么要用javascript进行类设置？当您输出行时，您可以在blue类中使用concat<代码>回声“
…

@lawrencerone让星星改变我同意LawrenceCherone和难以置信的帽子。创建星星不需要javascript。但我已经对你的问题做出了回答。很好地理解了存在多个

id

。当人们将html放入循环中时，我看到的最常见的陷阱之一就是。谢谢@creditablehat！我认为你的评论（在问题下）非常明智，希望OP采纳了你的建议。天哪，它奏效了。非常感谢你的帮助^_^