Contando “estrilinhas” usando JS prototype


Seguinte não tem aquelas estrilinhas de 1 a 5 que qnto mais se tem mais alguma coisa se é então, como contar … Existem n métodos, vou mostrar um usando prototype

Suponha que as estrelinhas estejam assim …


<ul id="estrelinhas">
<li><img class="estrela" src="estrela_on" src="estrela_on" onMouseOver=('mudaEstrela')></li>
<li><img class="estrela" src="estrela_on" src="estrela_on" onMouseOver=('mudaEstrela')></li>
<li><img class="estrela" src="estrela_on" src="estrela_on" onMouseOver=('mudaEstrela')></li>
<li><img class="estrela" src="estrela_off" src="estrela_off" onMouseOver=('mudaEstrela')></li>
<li><img class="estrela" src="estrela_off" src="estrela_off" onMouseOver=('mudaEstrela')></li>
</ul>

Bem suponha que a chamada mudaEstrela, faça a mágica de mudar de “estrela_off” para “estrela_on” … entao vamos ao JS prototype agora

function contaEstrela(){
var good = 0;
var img = $$('img.estrela');
img.each(function(e){
var est = e.src.split("/");
  var aux = est[est.length-1]
  if (aux=='estrela_on'){
   ++good;
  }});
return good;

}

Nao se esqueça de chamar a biblioteca prototype antes, agora explicando o JS …
$$(‘img.estrela’), me retorna um array de todos os elementos img com class estrela, dou um .each nesse array (parecido com o .next do ArrayList de Java), chamando uma funçao com parametro “e”, esse “e”, corresponde a cada elemente, pego o src dessa imagem, retiro a “/”, pego a ultima string se for ‘estrela_on’ incremento meu indice, qq duvida perguntar…

PS.: Sei q tem outras maneiras, talvez até mais fáceis, mas essa me pareceu mais simples, vou deixar com DGmike para ver se ele tem uma outra opção

Anúncios

2 comentários sobre “Contando “estrilinhas” usando JS prototype

  1. Ah, eu faria uma solução com radios e button, dentro de um formulário com metodo get ou post, passando por uma validação para ver se aquele ip já não votou.

    Daí em JS eu alteraria o código com document.createElement () ou simplesmente $().html() no jQuery pelas imagens, daí no proprio JS eu colocaria os eventos de over e click, mandando a resposta via ajax. Mas seria algo do gênero mesmo, contagem de elementos.

    De mais a mais, acho que eu faria com JS não obstrusivo. Talvez mais pra frente eu poste uma solução. 😀

  2. Ps. A minha solução é mais detalhada e talz, mas não é a melhor solução por demorar muito a contituí-la, alem de não ser de fácil entendimento, por isso teria que deixar um post separado só pra isso.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s