0
I’m creating a star rating system where I list the posts and shows classification. The problem is in posts who receive the same note. You are not picking up each note post and yes of a single post and showing the same note in the other.
In the database, I have the table post and in it are the fields pontos and votos where in the foreach using php splitting points by votes and forwarding the value and sending to the field data-average which sits on a span and in *javascript I take this value and manipulate the span increasing the width who has a yellow background and on top there’s a span against the background of a star.
This is my code php:
<?php
$consulta = $pdo->query("SELECT id_post , pontos , votos FROM posts LIMIT 3 ");
$return = $consulta->fetchAll(PDO::FETCH_OBJ);
foreach ($return as $dados) {
$calculo = ($dados->pontos == 0) ? 0 : round(($dados->pontos / $dados->votos), 1); ?>
<span class="ratingAverage" data-average="<?=$calculo ;?>"></span>
<span data-id="<?= $dados->id_post; ?>"></span><div class="barra"><span class="bg"></span><span class="stars">
<?php for ($i = 1; $i <= 5; $i++): ?><span class="star" data-vote="<?php echo $i; ?>"><span class="starAbsolute"></span></span>
<?php endfor; echo '</span></div><p class="votos vt"><span>' . $dados->votos . '</span> votos</p>';
?><?php } ?>
Man css:
.barra{width:150px; height:30px; background:#ebebeb; position:relative;}
.stars{position:absolute; left:0; top:0; width:100%;}
.star{float:left;width:30px;height:30px; text-align:center; position:relative;cursor:pointer;}
.star.full{background:linear-gradient(to bottom, #fee24f, #f4bb2f)}
.bg{float:left;height:30px; width:30%; background:linear-gradient(to bottom, #fee24f, #f4bb2f);}
.starAbsolute{position:absolute;top:0;left:0;width:100%;height:100%;background:url(/assets/img/config/v12/starpng.png) top left no-repeat; background-size:cover;}
Man javascript:
$(function() {
var average = $('.ratingAverage').attr('data-average');
function avaliacao(average) {
average = (Number(average) * 20);
$('.bg-').css('width', 0);
$('.barra- .bg-').animate({width: average + '%'}, 500);
}
avaliacao(average);
});
That is the code HTML when executed:
<span class="ratingAverage" data-average="4"></span>
<span data-id="1"></span><div class="barra-"><span class="bg-"></span><span class="stars-">
<span class="star-" data-vote="1"><span class="starAbsolute-"></span></span><span class="star-" data-vote="2"><span class="starAbsolute-"></span></span><span class="star-" data-vote="3"><span class="starAbsolute-"></span></span><span class="star-" data-vote="4"><span class="starAbsolute-"></span></span><span class="star-" data-vote="5"><span class="starAbsolute-"></span></span></span></div><p class="votos vt"><span>1</span> votos</p>
<span class="ratingAverage" data-average="4"></span>
<span data-id="2"></span><div class="barra-"><span class="bg-"></span><span class="stars-">
<span class="star-" data-vote="1"><span class="starAbsolute-"></span></span><span class="star-" data-vote="2"><span class="starAbsolute-"></span></span><span class="star-" data-vote="3"><span class="starAbsolute-"></span></span><span class="star-" data-vote="4"><span class="starAbsolute-"></span></span><span class="star-" data-vote="5"><span class="starAbsolute-"></span></span></span></div><p class="votos vt"><span>2</span> votos</p>
<span class="ratingAverage" data-average="4"></span>
<span data-id="3"></span><div class="barra-"><span class="bg-"></span><span class="stars-">
<span class="star-" data-vote="1"><span class="starAbsolute-"></span></span><span class="star-" data-vote="2"><span class="starAbsolute-"></span></span><span class="star-" data-vote="3"><span class="starAbsolute-"></span></span><span class="star-" data-vote="4"><span class="starAbsolute-"></span></span><span class="star-" data-vote="5"><span class="starAbsolute-"></span></span></span></div><p class="votos vt"><span>3</span> votos</p>
Stay that way if you look at span where you have the attribute date-avarege should take the votes of each id and that’s not what happens. He takes the value of the first one and plays for the rest, with the remainder voting 4 of the first id
You have already checked whether the round line (($data->points / $data->votes), 1) is not always returning the same value, that is to say in your database the points and votes fields when divided give the same value.
– Juven_v
i saw it returning the same value more as I solve it already it was to pick up the value of each id of the fields votes and points was pair to run since the variable calculate is inside the foreach how do I scroll through each id
– diogo Dsa
What I meant is if the amazed values in the table posts are not equal.
– Juven_v
not only does it catch the points and votes of 1 id and replica in the others in id 2 3 4 5 have different votes and points
– diogo Dsa
the error is in java script I think because it is giving the same value to others
– diogo Dsa