HTML - Ayuda HTML y jquery para un cuadrado

 
Vista:
sin imagen de perfil

Ayuda HTML y jquery para un cuadrado

Publicado por Javier (2 intervenciones) el 23/04/2015 23:33:03
Buenas tardes, espeor me ayuden. Cada vez que se pulse el botón de cambiar color, debe de cambiar el color del cuadrado de los que tengo declarados, pero el problema es que cuando lo pulso, cambia todos los colores, y debe ser de a uno por uno pero cada vez que yo de clic, y no todo de un jalón. Gracias.


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
<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="http://code.jquery.com/color/jquery.color.plus-names-2.1.2.js"></script>
<script>
    $(document).ready(function () {
        $("button").click(function () {
            var div = $("div");
            div.animate({backgroundColor: purple });
           div.animate({backgroundColor: yellow });
           div.animate({backgroundColor: black });
           div.animate({backgroundColor: blue });
           div.animate({backgroundColor: red });
        });
    });
</script>
</head>
 
<body>
<button>Start Animation</button>
<div style="background:#F01818;height:100px;width:100px;position:absolute;">
</div>
 
</body>
</html>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve
Val: 1.144
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Ayuda HTML y jquery para un cuadrado

Publicado por xve (1543 intervenciones) el 24/04/2015 09:07:49
Hola Javier, he probado tu código y me da error en el nombre de los colores...
ReferenceError: purple is not defined

Al igual con el resto de colores...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de Alberto

Ayuda HTML y jquery para un cuadrado

Publicado por Alberto (17 intervenciones) el 24/04/2015 09:46:11
Hola...

Con lo que tienes esta correcto que pase por todos los colores ya que al momento de presionar el botón no controlas cuando debe cambiar al color correspondiente, simplemente estas cargando todos los colores, por lo que podemos decir que en este caso el código le gano a tu lógica xD... Lo que debes hacer es hacer un contador para el botón; es decir, cuando presione el botón tener un contador y de esa manera tener el control de que color mostrar cuando llegue a determinado numero, y cuando el numero supere los colores que tienes tendrías que reiniciar el contador y colocar un color por defecto para que aparezcan nuevamente los colores.

A continuación, te proporciono el código...

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
<html>
	<head>
		<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
		<script src="http://code.jquery.com/color/jquery.color.plus-names-2.1.2.js"></script>
		<script>
			var conta = 0;
			$(document).ready(function () {
				$("button").click(function () {
					var div = $("div");
					conta = conta + 1;
					if (conta == 1){
						div.animate({backgroundColor: 'purple' });
					} else if (conta == 2){
						div.animate({backgroundColor: 'yellow' });
					} else if (conta == 3){
						div.animate({backgroundColor: 'black' });
					} else if (conta == 4){
						div.animate({backgroundColor: 'blue' });
					} else if (conta == 5){
						div.animate({backgroundColor: 'pink' });
					} else {
						div.animate({backgroundColor: 'green'});
						conta = 0;
					}
					alert(conta);
				});
			});
		</script>
	</head>
	<body>
		<button>Start Animation</button>
		<div style="background:#F01818;height:100px;width:100px;position:absolute;"></div>
	</body>
</html>

Sin mas que comentar, cualquier duda y/o inconveniente, aquí estamos. Suerte!

P.D.1. El alert() es con fines de observar como incrementa el contador cada que presiono el botón pero si tu gustas puedes omitirlo para evitarte los mensajes molestos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
3
Comentar
sin imagen de perfil

Ayuda HTML y jquery para un cuadrado

Publicado por Javier (2 intervenciones) el 24/04/2015 17:13:08
Muchas gracias y si ya veo ahora y entiendo. Yo ando en la prepa y mi hermanoya va en la universidad y estudia algo de ésto y me gusta, y estoy tratando de aprender de tutoriales, foros o páginas para iniciarme en el mundo de la programación, y me pongo retos, pero éste nomás mi lógica no daba para más, pero con tu ayuda ahora entiendo más, y se me ocurren muchas cosas por ponerme ahora. Muchas gracias por el tiempo a los que respondieron, saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar