评级系统明星不会根据其数量显示

时间:2018-03-05 18:32:29

标签: javascript php jquery html css

img我有一个问题,我无法解决。我正在制作一个评级系统,无论最后一篇文章中的最高评分是什么,每篇文章都会在星星中显示。我不知道我是什么做错了,想知道是否有人可以检查出来谢谢你。 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 个答案:

答案 0 :(得分:1)

每行都有相同的类。因此,所有行都采用最后$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>
    ";
}

你也有多次相同的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>"