7

Estou criando um formulário de cadastro, nele irei inserir um sistema de votação, queria fazer que ao clicar em alguma estrela, as outras anteriores irão mudar de cor também. (Segue o código que criei)

<div class="vote">
<label>
    <input type="radio" id="cm_star" name="fb" value="1" />
    <i class="fa"></i>
</label>
<label>
    <input type="radio" id="cm_star" name="fb" value="2" />
    <i class="fa"></i>
</label>
<label>
    <input type="radio" id="cm_star" name="fb" value="3" />
    <i class="fa"></i>
</label>
<label>
    <input type="radio" id="cm_star" name="fb" value="4" />
    <i class="fa"></i>
</label>
<label>
    <input type="radio" id="cm_star" name="fb" value="5" />
    <i class="fa"></i>
</label>

O resultado em imagem:

3

3 Respostas 3

21

É possível fazer utilizando somente CSS, com o seletor irmão ~ e algumas modificações no HTML.

.estrelas input[type=radio] {
  display: none;
}
.estrelas label i.fa:before {
  content:'\f005';
  color: #FC0;
}
.estrelas input[type=radio]:checked ~ label i.fa:before {
  color: #CCC;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="estrelas">
  <input type="radio" id="cm_star-empty" name="fb" value="" checked/>
  <label for="cm_star-1"><i class="fa"></i></label>
  <input type="radio" id="cm_star-1" name="fb" value="1"/>
  <label for="cm_star-2"><i class="fa"></i></label>
  <input type="radio" id="cm_star-2" name="fb" value="2"/>
  <label for="cm_star-3"><i class="fa"></i></label>
  <input type="radio" id="cm_star-3" name="fb" value="3"/>
  <label for="cm_star-4"><i class="fa"></i></label>
  <input type="radio" id="cm_star-4" name="fb" value="4"/>
  <label for="cm_star-5"><i class="fa"></i></label>
  <input type="radio" id="cm_star-5" name="fb" value="5"/>
</div>

Nota: foi necessário incluir um radio vazio pré-selecionado para que as estrelas sejam exibidas corretamente quando nenhum valor está selecionado.

8
  • 1
    Sanção, ele gostaria que as estrelas anteriores também fiquem selecionadas. Commented 22/06/2015 às 17:29
  • 2
    @MaiconCarraro, só vi agora os comentários, tomei como base a imagem na pergunta, obrigado por avisar Commented 22/06/2015 às 17:30
  • 1
    @MaiconCarraro resposta atualizada Commented 22/06/2015 às 17:56
  • Muito bom ! :)) Commented 22/06/2015 às 17:57
  • Muito obrigado, era isso mesmo o que eu tava precisando =D
    – Leno Sousa
    Commented 22/06/2015 às 18:21
6

Fiz usando javascript puro, basicamente criei uma função pra percorrer todas img com mesmo nome e conforme qual estrela foi clicada (indice) eu atribuo se ela vai ser destaca ou não.

function seleciona(name, indice) {
   var imgs = document.querySelectorAll('img[name=' + name + ']');
  
   for (var i=0; i < imgs.length; i++) {
       if (i <= indice)
           imgs[i].className = "destaque";
       else
           imgs[i].className = "apagada";
   }
}

window.onload = function() {
   var imgs = document.querySelectorAll('img[name=fb]');
  
   for (var i=0; i < imgs.length; i++) {
       (function(name, i) {
          imgs[i].addEventListener('click', function () {
              seleciona(name, i);
          });
       })(imgs[i].name, i);
   }
}
.apagada {
  background-image: url('http://www.biblecast.net.br/resources/estrela-prata.png');
  width: 32px;
  height: 32px;
  cursor: pointer;
}

.destaque {
  background-image: url('http://imobiliariacincoestrelas.com.br/images/estrela.png');
  width: 32px;
  height: 32px;
  cursor: pointer;
}
<label>
    <img name="fb" class="apagada"/>
</label>
<label>
    <img name="fb" class="apagada"/>
</label>
<label>
    <img name="fb" class="apagada"/>
</label>
<label>
    <img name="fb" class="apagada"/>
</label>
<label>
    <img name="fb" class="apagada"/>
</label>

5

Seguindo sua estrutura HTML, deixo aqui uma sugestão utilizando jQuery.

$('.vote label i.fa').on('click mouseover',function(){
    // remove classe ativa de todas as estrelas
    $('.vote label i.fa').removeClass('active');
    // pegar o valor do input da estrela clicada
    var val = $(this).prev('input').val();
    //percorrer todas as estrelas
    $('.vote label i.fa').each(function(){
        /* checar de o valor clicado é menor ou igual do input atual
        *  se sim, adicionar classe active
        */
        var $input = $(this).prev('input');
        if($input.val() <= val){
            $(this).addClass('active');
        }
    });
    $("#voto").html(val); // somente para teste
});
//Ao sair da div vote
$('.vote').mouseleave(function(){
    //pegar o valor clicado
    var val = $(this).find('input:checked').val();
    //se nenhum foi clicado remover classe de todos
    if(val == undefined ){
        $('.vote label i.fa').removeClass('active');
    } else { 
        //percorrer todas as estrelas
        $('.vote label i.fa').each(function(){
            /* Testar o input atual do laço com o valor clicado
            *  se maior, remover classe, senão adicionar classe
            */
            var $input = $(this).prev('input');
            if($input.val() > val){
                $(this).removeClass('active');
            } else {
                $(this).addClass('active');
            }
        });
    }
    $("#voto").html(val); // somente para teste
});
.vote label {
    cursor:pointer;
}
.vote label input{
    display:none;
}
.vote label i {
    font-family:FontAwesome;
    font-size:18px;
    -webkit-transition-property:color, text;
    -webkit-transition-duration: .2s, .2s;
    -webkit-transition-timing-function: linear, ease-in;
    -moz-transition-property:color, text;
    -moz-transition-duration:.2s;
    -moz-transition-timing-function: linear, ease-in;
    -o-transition-property:color, text;
    -o-transition-duration:.2s;
    -o-transition-timing-function: linear, ease-in;
}
.vote label i:before {
    content:'\f005';
}
.vote label i.active {
    color:gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="vote">
<label>
    <input type="radio" name="fb" value="1" />
    <i class="fa"></i>
</label>
<label>
    <input type="radio" name="fb" value="2" />
    <i class="fa"></i>
</label>
<label>
    <input type="radio" name="fb" value="3" />
    <i class="fa"></i>
</label>
<label>
    <input type="radio" name="fb" value="4" />
    <i class="fa"></i>
</label>
<label>
    <input type="radio" name="fb" value="5" />
    <i class="fa"></i>
</label>
</div>

<div id="voto">
    
</div>

JSFiddle

2
  • 1
    Bem interessante a solução usando content e mouseover, mas vou deixar minha resposta caso alguém queira fazer mais "manual" Commented 22/06/2015 às 16:53
  • @MaiconCarraro com certeza sua resposta é válida, e ainda é em javascript puro, se ele unir as ideias conseguirá chegar ao resultado que deseja.
    – abfurlan
    Commented 22/06/2015 às 16:55

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 .