JQuery - Problema tirar dados

 
Vista:

Problema tirar dados

Publicado por mer (3 intervenciones) el 09/06/2013 02:45:03
Hola como estan?

Mi problema es que tengo que realizar un ejercicio en el cual dandole click a un dado, muestre la cara con el numero que salió de la funcion Math.random. Por ejemplo: Si en var num = Math.floor(Math.random() * 6) + 1; num=3, me muestre el numero 3 en el dado.
Para eso tengo 6 imagenes, cada una con la cara correspondiente a los numeros 1 al 6.

Como podré asociar el numero con la imagen que corresponda?
Muchas gracias!
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: 302
Oro
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

Problema tirar dados

Publicado por xve (673 intervenciones) el 09/06/2013 17:15:18
Hola mer, como se llaman las imagenes?

Si se llaman del estilo: num1.jpg, num2.jpg, ... las podras vincular con el numero que aparece...

Si nos puedes mostrar el código intento ayudarte, ok?
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

Problema tirar dados

Publicado por mer (3 intervenciones) el 09/06/2013 20:24:16
<div id="tablero" class="contenedorTablero">
<img id="cara1" src="img/1.png" />
<img id="cara2" src="img/2.png" />
<img id="cara3" src="img/3.png" />
<img id="cara4" src="img/4.png" />
<img id="cara5" src="img/5.png" />
<img id="cara6" src="img/6.png" />
</div>
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
Imágen de perfil de xve
Val: 302
Oro
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

seleccionar imagen según valor

Publicado por xve (673 intervenciones) el 09/06/2013 20:57:05
No nos muestras tu código jquery, pero por ejemplo, si te devuelve que el que tienes que seleccionar es la imagen 5, podrías hacer algo así:

1
2
3
4
5
6
7
var valor=5;
 
# añadir el estilo disabled a todas las imagenes
$("#tables img").addClass("disabled");
 
# eliminamos dicho estilo a la imagen deseada
$("#cara"+valor).removeClass("disabled");


El estilo disabled puede ser algo como:
1
.disabled {display:none;}


Coméntanos, si te sirve, ok?
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

seleccionar imagen según valor

Publicado por mer (3 intervenciones) el 10/06/2013 01:40:38
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
<html>
    <head>
        <link href='http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Serif' rel='stylesheet' type='text/css'>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="JQuery.js"></script>
 
        $("#dado").click(tiroDado);
       function tiroDado() {
       var num = Math.floor(Math.random() * 6) + 1;   }
 
 </head>
    <body>
        <div id="tablero" class="contenedorTablero">
            <img id="cara1" src="img/1.png" style="display: none"/>
            <img id="cara2" src="img/2.png" style="display: none"/>
            <img id="cara3" src="img/3.png" style="display: none"/>
            <img id="cara4" src="img/4.png" style="display: none"/>
            <img id="cara5" src="img/5.png" style="display: none"/>
            <img id="cara6" src="img/6.png" style="display: none"/>
 
          <img id="dado" src="img/6.png" alt="dado" />
 
 </div>
 </body>
</html>


Ese es mi codigo hasta el momento, perdon, soy nuevo en esto y necesito ayuda. Me podrias decir que es lo que me falta o lo que tengo que cambiar? MUCHAS GRACIAS
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

seleccionar imagen según valor

Publicado por aquiles (9 intervenciones) el 13/06/2013 06:47:15
Hola amigo prueba esto.

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
<div id="tablero" class="contenedorTablero">
            <img id="cara1" class="dado" src="img/1.png" style="display: none"/>
            <img id="cara2" class="dado" src="img/2.png" style="display: none"/>
            <img id="cara3" class="dado" src="img/3.png" style="display: none"/>
            <img id="cara4" class="dado" src="img/4.png" style="display: none"/>
            <img id="cara5" class="dado" src="img/5.png" style="display: none"/>
            <img id="cara6" class="dado" src="img/6.png" style="display: none"/>
 </div>
 
function mostrarDado(num){
	var tablero = $("#tablero");
	// Se ocultan todos los dados.
	tablero.find(".dado").hide();
 
	// Se muestra el indicado.
	tablero.find("#cara" + num).show();
}
 
 
// Mostrar dado inicial.
mostrarDado(6);
 
function tiroDado() {
	var num = Math.floor(Math.random() * 6) + 1;
 
	// Mostrar dado aleatorio.
	mostrarDado(num);
};


Espero que te sea util.
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