1

bom estou criando um sistema de classificação por estrelas mais não estou conseguindo fazer com que o jquery aplique o Width correto para cada span no exemplo abaixo eu tenho tres DIVS e cada uma das 3 divs dentro delas tem

<span class="ratingAverage" data-average="1.2"></span>
<span class="ratingAverage" data-average="4.2"></span>
<span class="ratingAverage" data-average="5.6"></span>

então com o jquery eu pego o valor de cada um do data-avarege e faz o calculo e aumenta o a barra em %

< script type = "text/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);
  }); <
/script>

<!-- begin snippet: js hide: false console: true babel: false -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col col-12">
<div class="about">
   <span class="ratingAverage" data-average="1.2"></span>
  <span class="article" data-id=""></span>
  <div class="barra">
    <span class="bg"></span>
    <div class="overhiden">
      <span class="stars">
      <span class="star" data-vote="1"></span>
      <span class="star" data-vote="2"></span>
      <span class="star" data-vote="3"></span>
      <span class="star" data-vote="4"></span>
      <span class="star" data-vote="5"></span>
      </span>
    </div>
  </div>
</div>
</div>

<div class="col col-12">
<div class="about">
 <span class="ratingAverage" data-average="4.2"></span>
  <span class="article" data-id=""></span>
  <div class="barra">
    <span class="bg"></span>
    <div class="overhiden">
      <span class="stars">
      <span class="star" data-vote="1"></span>
      <span class="star" data-vote="2"></span>
      <span class="star" data-vote="3"></span>
      <span class="star" data-vote="4"></span>
      <span class="star" data-vote="5"></span>
      </span>
    </div>
  </div>
</div>
</div>

<div class="col col-12">
 <div class="about">
  <span class="ratingAverage" data-average="5.6"></span>
  <span class="article" data-id=""></span>
  <div class="barra">
    <span class="bg"></span>
    <div class="overhiden">
      <span class="stars">
      <span class="star" data-vote="1"></span>
      <span class="star" data-vote="2"></span>
      <span class="star" data-vote="3"></span>
      <span class="star" data-vote="4"></span>
      <span class="star" data-vote="5"></span>
      </span>
    </div>
  </div>
</div>
</div>

o codigo do jeito que ta retorna desta maneira como na imagem

inserir a descrição da imagem aqui

ao invés de retornar assim

inserir a descrição da imagem aqui

o JQuery faz o calculo so da 1 div e coloca o mesmo resultado nas demais ao invés de refazer o calculo de cada uma de acordo com o valor passado no data-avarege sou iniciante peço ajuda dos mais experientes

2
  • Diogo, primeiro de tudo aí acho que você vai ter que rever seu HTML cara, tem div dentro de span. Dá uma reestruturada nisso, senão fica difícil!
    – LeAndrade
    Commented 21/09/2018 às 22:09
  • eu não tinha visto ja arumei
    – diogo Dsa
    Commented 21/09/2018 às 22:15

3 Respostas 3

2

Cara confesso que não entendi bem o seu HTML, mas, deixo aqui uma resposta espero que te ajude a te dar um norte aí:

$(function() {
    
    $('.ratingAverage').each(function(index) {
      var average = $(this).attr('data-average');
      average = average * 20;
      
      $('.bg').css('width', 0);
      
      if(index == 0) {
        $('.bg:eq(0)').animate({
          width: average + '%'
        }, 500);
      } else if(index == 1) {
        $('.bg:eq(1)').animate({
          width: average + '%'
        }, 500);
      } else if(index == 2) {
        $('.bg:eq(2)').animate({
          width: average + '%'
        }, 500);
      }

    })

});
.bg{background-color: yellow; height: 50px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="col col-12">
<div class="about">
   <span class="ratingAverage" data-average="1.2"></span>
  <span class="article" data-id=""></span>
  <div class="barra">
    <span class="bg"></span>
    <div class="overhiden">
      <span class="stars">
      <span class="star" data-vote="1"></span>
      <span class="star" data-vote="2"></span>
      <span class="star" data-vote="3"></span>
      <span class="star" data-vote="4"></span>
      <span class="star" data-vote="5"></span>
      </span>
    </div>
  </div>
</div>
</div>

<div class="col col-12">
<div class="about">
 <span class="ratingAverage" data-average="4.2"></span>
  <span class="article" data-id=""></span>
  <div class="barra">
    <span class="bg"></span>
    <div class="overhiden">
      <span class="stars">
      <span class="star" data-vote="1"></span>
      <span class="star" data-vote="2"></span>
      <span class="star" data-vote="3"></span>
      <span class="star" data-vote="4"></span>
      <span class="star" data-vote="5"></span>
      </span>
    </div>
  </div>
</div>
</div>

<div class="col col-12">
 <div class="about">
  <span class="ratingAverage" data-average="5.6"></span>
  <span class="article" data-id=""></span>
  <div class="barra">
    <span class="bg"></span>
    <div class="overhiden">
      <span class="stars">
      <span class="star" data-vote="1"></span>
      <span class="star" data-vote="2"></span>
      <span class="star" data-vote="3"></span>
      <span class="star" data-vote="4"></span>
      <span class="star" data-vote="5"></span>
      </span>
    </div>
  </div>
</div>
</div>

2
  • obrigado pela resposta do jeito que voce fez da certo eu dei um exemplo com 3 divs so que as div estão dentro de um foreach ou seja tem mais de três divs como faria para criar um for e aplicar em todas e nao somente as tres
    – diogo Dsa
    Commented 21/09/2018 às 23:39
  • Não sei qual seu conhecimento em jQuery e quantas divs são no seu código, mas, lhe aconselho aí ir fazendo else if como fiz, se você ver que vai ficar ruim terá que fazer for só que aí vai complicando mais o código.
    – LeAndrade
    Commented 21/09/2018 às 23:47
2

O jeito mais simples de resolver isso seria percorrer todos os objetos com a mesma classe e aplicar os cálculos necessários para o mesmo, segue um código exemplo de como percorrer isso. $(document).ready(function(){ //PERCORRE TODOS OS OBJETOS COM A CLASSE .ratingAverage $(".about").each(function(){ var average = $(this).find('.ratingAverage').data('average'); average = (Number(average) * 20); $(this).find('.bg').css('width', 0); $(this).find('.bg').animate({ width: average + '%' }, 500); }); });

4
  • fiz como voce disse usando o each usando o console.log(average); retorna os valores correntos mais ao aplicar o width a cada uma ele continua a aplicar o mesmo valor em todas
    – diogo Dsa
    Commented 21/09/2018 às 23:16
  • 1
    @diogoDsa Fiz a alteração no código, depois dê uma verificada
    – JrD
    Commented 21/09/2018 às 23:51
  • Explicando as aterações... Mudei o seletou para a classe about, já que todos elementos que precisamos estão dentro dele. Para cada about é usado a função find() do JQuery para capturar outro elemento dentro do elemento atual, e apóis isso só seguindo a sequência... Espero ter ajudado :)
    – JrD
    Commented 22/09/2018 às 0:04
  • cara você salvou minha vida já estava quase desistindo muito obrigado.
    – diogo Dsa
    Commented 22/09/2018 às 0:14
1

Esta linha $('.bg').css('width', 0); me parece bem desnecessária. Por que redefinir o width da classe .bg se o código só é executado 1 vez e o span vazio já tem width 0? Não há essa necessidade.

Minha sugestão é parecida com a do @JrD, porém um pouco mais simplificada:

$(function(){
   var avg = $('.ratingAverage'); // seleciona todas as spans com a classe
   avg.each(function(i){ // percorre os elementos
      var average = Number($(this).data('average'))*20; // faz o cálculo
      $('.bg:eq('+i+')') // busca o elemento pelo index
      .animate({
         width: average + '%'
      }, 500);
   });
});
.bg{
   background: red;
   height: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col col-12">
<div class="about">
   <span class="ratingAverage" data-average="1.2"></span>
  <span class="article" data-id=""></span>
  <div class="barra">
    <span class="bg"></span>
    <div class="overhiden">
      <span class="stars">
      <span class="star" data-vote="1"></span>
      <span class="star" data-vote="2"></span>
      <span class="star" data-vote="3"></span>
      <span class="star" data-vote="4"></span>
      <span class="star" data-vote="5"></span>
      </span>
    </div>
  </div>
</div>
</div>

<div class="col col-12">
<div class="about">
 <span class="ratingAverage" data-average="4.2"></span>
  <span class="article" data-id=""></span>
  <div class="barra">
    <span class="bg"></span>
    <div class="overhiden">
      <span class="stars">
      <span class="star" data-vote="1"></span>
      <span class="star" data-vote="2"></span>
      <span class="star" data-vote="3"></span>
      <span class="star" data-vote="4"></span>
      <span class="star" data-vote="5"></span>
      </span>
    </div>
  </div>
</div>
</div>

<div class="col col-12">
 <div class="about">
  <span class="ratingAverage" data-average="5.6"></span>
  <span class="article" data-id=""></span>
  <div class="barra">
    <span class="bg"></span>
    <div class="overhiden">
      <span class="stars">
      <span class="star" data-vote="1"></span>
      <span class="star" data-vote="2"></span>
      <span class="star" data-vote="3"></span>
      <span class="star" data-vote="4"></span>
      <span class="star" data-vote="5"></span>
      </span>
    </div>
  </div>
</div>
</div>

1
  • perfeito funcionou certinho eu entendo um pouco jquery sei usar as funções só não consigo e estruturar o código . obrigado pela ajuda
    – diogo Dsa
    Commented 22/09/2018 às 14:57

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .