0
I’m trying to develop an evaluation scheme of files that are hosted on my client’s website. Each file gains beyond the access link a DIV with the five evaluation options, which appear as stars in gray. Here is the code:
<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>
And the Javascript code, when you pass a star it changes color. And when you click, it warns you which of the five options you voted for:
<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>
Is there any practical way to improve the Hover function in this case? It would look something like this:
- Pass through star 5 and they all change color.
- Pass through star 4 and only stars 1, 2, 3 and 4 change color.
- Pass through star 3 and only stars 1, 2 and 3 change color.
- Pass through star 2 and only stars 1 and 2 change color.
- Passes through star 1 and only it changes color.
Because at the moment, only the respective star changes color when you pass through it. Does anyone know?
Your code is excellent, but here’s the thing: I have a list of files on the page and, next to each file link, there will be stars to evaluate. In your method within my file code, he always keeps the number chosen on the first line. And the idea is that when you click on one of the five stars, you automatically vote. If you know any more ideas...
– Gustavo Hoppe Levin
Use ajax by passing the vote and the item you are voting on
– Fabricio