0

Estou tentando desenvolver um esquema de avaliação de arquivos que estão hospedados no site do meu cliente. Cada arquivo ganha além do link de acesso uma DIV com as cinco opções de avaliação, que aparecem como estrelas em cinza. Eis o código:

<div style="margin-top: -2px">
    <?php for($s=1;$s<=5;$s++){ ?>
        <img id="Estrela<?php echo $s; ?>" class="starClick" onclick="javascript:vota(<?php echo $s; ?>)" src="http://meusite.com.br/star2.png" <?php if($s==1){ echo "style='margin-left: 5px'"; } ?> />
    <?php } ?>
</div>

E o código Javascript, quando ao passar por uma estrela ela muda de cor. E ao clicar, ele avisa qual das cinco opções que você votou:

<script type="text/javascript">
$('.starClick').hover(function() {
    $(this).attr('src', 'http://meusite.com.br/star1.png');
}, function() {
    $(this).attr('src', 'http://meusite.com.br/star2.png');
});

function vota(val){
    if(val == '1'){
        alert('Você votou HORRÍVEL');
    }
    else if(val == '2'){
        alert('Você votou RUIM');
    }
    else if(val == '3'){
        alert('Você votou MÉDIO');
    }
    else if(val == '4'){
        alert('Você votou BOM');
    }
    else if(val == '5'){
        alert('Você votou ÓTIMO');
    }
}
</script>

Existe algum modo prático de melhorar a função hover nesse caso? Seria mais ou menos assim:

  • Passa pela estrela 5 e todas mudam de cor.
  • Passa pela estrela 4 e só as estrelas 1, 2, 3 e 4 mudam de cor.
  • Passa pela estrela 3 e só as estrelas 1, 2 e 3 mudam de cor.
  • Passa pela estrela 2 e só as estrelas 1 e 2 mudam de cor.
  • Passa pela estrela 1 e só ela muda de cor.

Porque no momento, só a respectiva estrela muda de cor quando se passa por ela. Alguém sabe?

2 Respostas 2

1

Huum.. entendo bom poderia usar ajax desta forma...

<script>
  $('input[type="radio"]').change(function (){
    //aqui pega o valor do voto
    var voto = $(this).val();
    //aqui pega o id do item (no caso id do arquivo a ser votado)
    var id = $(this.id);
    // pagina que vai realizar o insert
    $.post('pagina.php',{
      voto: star,
      id: id
    },function(data) {
        // retorna resultado do voto
        $('.star').html(data);
    });
  });
</script>
1

Olá, bom eu ja fiz um script bem parecido creio que deve ajudar...

    
    /* Estilo das estrelas quando elas estão "ativadas" checked */
    .radio-1:checked ~ .star-item-1:before,
    .radio-1:focus ~ .star-item-1:before, .radio-2:checked ~ .star-item-1:before,
    .radio-2:focus ~ .star-item-1:before, .radio-2:checked ~ .star-item-2:before,
    .radio-2:focus ~ .star-item-2:before, .radio-3:checked ~ .star-item-1:before,
    .radio-3:focus ~ .star-item-1:before, .radio-3:checked ~ .star-item-2:before,
    .radio-3:focus ~ .star-item-2:before, .radio-3:checked ~ .star-item-3:before,
    .radio-3:focus ~ .star-item-3:before, .radio-4:checked ~ .star-item-1:before,
    .radio-4:focus ~ .star-item-1:before, .radio-4:checked ~ .star-item-2:before,
    .radio-4:focus ~ .star-item-2:before, .radio-4:checked ~ .star-item-3:before,
    .radio-4:focus ~ .star-item-3:before, .radio-4:checked ~ .star-item-4:before,
    .radio-4:focus ~ .star-item-4:before, .radio-5:checked ~ .star-item-1:before,
    .radio-5:focus ~ .star-item-1:before, .radio-5:checked ~ .star-item-2:before,
    .radio-5:focus ~ .star-item-2:before, .radio-5:checked ~ .star-item-3:before,
    .radio-5:focus ~ .star-item-3:before, .radio-5:checked ~ .star-item-4:before,
    .radio-5:focus ~ .star-item-4:before, .radio-5:checked ~ .star-item-5:before,
    .radio-5:focus ~ .star-item-5:before, .star-item:hover:before, .star:hover .star-item:before {
      color: #ffca00;
    }
    
    /* Estilo das estrelas quando elas estão "desativadas" unchecked */
    .star-item:before, .star-item:hover ~ .star-item:before {
      color: #CCC;
    }
    
    .star-item {
      font: "0/0" a;
      color: transparent;
      text-shadow: none;
      background-color: transparent;
      border: 0;
    }
    
    /* Esconde radio */
    .radio {
      position: absolute;
      top: -999999em;
      left: auto;
      width: 1px;
      height: 1px;
      overflow: hidden;
    }
    
    /* Escreve os seletores das estrelas para marcalas como "ativas" checked, quando um input radio 3 está "ativo" checked, as estrelas 3, 2 e 1 devem aparecer "ativas", esse loop escreve essas classes para nós. */
    .star {
      display: -webkit-inline-box;
      display: -webkit-inline-flex;
      display: -ms-inline-flexbox;
      display: inline-flex;
      -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      pointer-events: none;
    }
    
    .star-item {
      cursor: pointer;
      display: inline-block;
      pointer-events: initial;
      width: 1em;
      height: 1em;
      overflow: hidden;
      line-height: 100%;
      font-size:28px;
    }
    .star-item:before {
      -webkit-transition: color 200ms;
              transition: color 200ms;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
      will-change: color;
      content: '\2605';
    }
    
    /* Ao passar o mouse no container das estrelas, todos os itens ficam como marcados */
    /* Esconde os input radio de forma que continuem acessíveis via teclado */
    /* Ordena os itens da direita para a esquerda */
    .star:dir(rtl) .star-item, .star.rtl .star-item {
      direction: rtl;
    }
<div class='star'>
  <input name='rating' id='star-1' value='1' type='radio' class='radio radio-1 required'/>
  <input name='rating' id='star-2' value='2' type='radio' class='radio radio-2'/>
  <input name='rating' id='star-3' value='3' type='radio' class='radio radio-3'/>
  <input name='rating' id='star-4' value='4' type='radio' class='radio radio-4'/>
  <input name='rating' id='star-5' value='5' type='radio' class='radio radio-5'/>
  <label for='star-1' class='star-item star-item-1'>1 stars</label>
  <label for='star-2' class='star-item star-item-2'>2 stars</label>
  <label for='star-3' class='star-item star-item-3'>3 stars</label>
  <label for='star-4' class='star-item star-item-4'>4 stars</label>
  <label for='star-5' class='star-item star-item-5'>5 stars</label>
  <span>Vote</span>
</div>

2
  • O seu código é excelente, mas acontece o seguinte: eu tenho uma lista de arquivos na página e, ao lado de cada link de arquivo, vão constar as estrelas pra avaliar. No teu método dentro do meu código do arquivo, ele guarda sempre o número escolhido na primeira linha. E a ideia é que quando clica numa das cinco estrelas já compute automaticamente o voto. Caso tu saiba mais alguma ideia... Commented 22/03/2017 às 18:13
  • Use ajax passando o voto e o item que esta votando
    – Fabricio
    Commented 22/03/2017 às 18:36

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 .