Código de JQuery - Votación con estrellas con jquery

Imágen de perfil
Val: 389
Oro
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

Votación con estrellas con jquerygráfica de visualizaciones


JQuery

Actualizado el 17 de Marzo del 2019 por Xavi (530 códigos) (Publicado el 18 de Agosto del 2014)
15.130 visualizaciones desde el 18 de Agosto del 2014
Código HTML con JQuery y Sprites que muestra como realizar una votación utilizando cinco estrellas.

Versión 1
estrellaestrellaestrellaestrellaestrella(15)

Actualizado el 17 de Marzo del 2019 (Publicado el 18 de Agosto del 2014)gráfica de visualizaciones de la versión: Versión 1
15.131 visualizaciones desde el 18 de Agosto del 2014
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

Puedes ver un ejemplo aquí

La imagen stars.png
stars
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-1.11.1.js" type="text/javascript"></script>
 
    <script>
    $(document).ready(function(){
		// Capturamos el click encima de una estrella
		$("#stars li").click(function(){
			if($(this).is("li:first") && $(this).hasClass("selected") && !$(this).nextAll("li").hasClass("selected"))
			{
				// Si es la primera estrella la selecciona, y dicha estrella
				// esta marcada y es la unica marcada, quitamos la clase
				$(this).removeClass("selected");
 
				// añadimos al valor al formulario
				$("input[name=stars]").val(0);
			}else{
				// añadimos la clase "selected"
				$(this).addClass("selected");
 
				// añadimos la clase "selected" a todas las estrellas anteriores
				$(this).prevAll("li").addClass("selected");
 
				// eliminamos la clase "selected" a todas las estrellas siguientes
				$(this).nextAll("li").removeClass("selected");
 
				// añadimos al valor al formulario
				$("input[name=stars]").val($( "li" ).index($(this))+1);
			}
		});
	});
    </script>
 
	<style>
	ul {
		list-style-type: none;
		margin:0;
		padding:0;
		overflow:hidden;
	}
	ul li{
		background:url('stars.png') no-repeat 0px 0px transparent;
		width:16px;
		height:16px;
		float:left;
	}
	ul li.selected{ /* esta clase añade la imagen seleccionada */
		background:url('stars.png') no-repeat -16px 0px transparent;
	}
	</style>
</head>
 
<body>
 
<?php
if(isset($_POST["stars"]))
{
	# Mostramos la valoración que se ha enviado mediante el formulario
	echo "<p>La valoración a sido de: ".$_POST["stars"]."</p>";
}
?>
<form action="<?php echo $_SERVER["PHP_SELF"]?>" method="post">
	<input type="hidden" name="stars" value="0">
	<ul id="stars">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<p><input type="submit" value="Enviar valoración"></p>
</form>
 
</body>
</html>



Comentarios sobre la versión: Versión 1 (15)

Alex hernández
3 de Septiembre del 2015
estrellaestrellaestrellaestrellaestrella
Muy bueno para valorar asistencia técnica. Muchas gracias !
Responder
Imágen de perfil
4 de Octubre del 2015
estrellaestrellaestrellaestrellaestrella
Muy bueno
Responder
john jairo
22 de Marzo del 2016
estrellaestrellaestrellaestrellaestrella
mensaje de calificacion
Responder
ALEXKAOZ
16 de Septiembre del 2016
estrellaestrellaestrellaestrellaestrella
ESTA BUENO
Responder
test
20 de Diciembre del 2016
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder
luis salazar
3 de Enero del 2017
estrellaestrellaestrellaestrellaestrella
es lo que buscaba
Responder
karina
6 de Julio del 2017
estrellaestrellaestrellaestrellaestrella
buenisimo
Responder
loreli
17 de Abril del 2017
estrellaestrellaestrellaestrellaestrella
lo que busque
Responder
Jorge Leonel
3 de Julio del 2017
estrellaestrellaestrellaestrellaestrella
Excelente
Responder
awdf
23 de Julio del 2018
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder
Viviana
16 de Marzo del 2019
estrellaestrellaestrellaestrellaestrella
Todo bien. Pero ¿y el sprite? Gracias por tu aporte!
Responder
Imágen de perfil
17 de Marzo del 2019
estrellaestrellaestrellaestrellaestrella
Lo podias coger de la pagina del ejemplo, pero ya te lo he publicado en la parte superior del código.
Responder
18 de Marzo del 2019
estrellaestrellaestrellaestrellaestrella
Excelente!!! gracias por el aporte ...
Responder
Daira Villamil
5 de Junio del 2019
estrellaestrellaestrellaestrellaestrella
Excelente, solo una pregunta. ¿Como puedo conectarlo a mi base de datos? Gracias
Responder
Pedro
17 de Mayo del 2020
estrellaestrellaestrellaestrellaestrella
Hay alguna manera de que cuando devuelva el post con la puntuacion quede registrado en un archivo de texto que vaya sumando.
Responder

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s2742