Jquery Click en slidedown

[DanB]

Buenas ,aver si me podeis ayudar con un problema con el que me encuentro,

estoy realizando un juego web sencillo que consiste en que aparecen en unas posiciones topos y tienes que darles  antes de que desaparezcan para sumar puntos , el tipico de los recreativos ,no me viene el nombre a la cabeza ahora mismo xD

El problema me viene en la funcion que tengo para mostrar el div del topo, en la animacion slideDown cuando muestra el topo, deberia esperar ver si an pulsado click y si no an pulsado esconderse, y si an pulsado esconderse tambien, nose si me esplico pongo el codigo para lo que veais:

HTML

Código (html4strict) [Seleccionar] Expandir


<div id="tablero">
<table border=1 id="tblPrp">
<tr>
<td><div num="1" class="diglet" estado="no"></div></td>
<td><div num="2" class="diglet" estado="no"></div></td>
<td><div num="3" class="diglet" estado="no"></div></td>
</tr>
<tr >
<td><div num="4" class="diglet" estado="no"></div</td>
<td><div num="5" class="diglet" estado="no"></div></td>
<td><div num="6" class="diglet" estado="no"></div></td>
</tr>
<tr >
<td><div num="7" class="diglet" estado="no"></div</td>
<td><div num="8" class="diglet" estado="no"></div></td>
<td> <div num="9" class="diglet" estado="no"></div</td>
</tr>
</table>
</div>


Código (css) [Seleccionar] Expandir


.diglet{ width:180px;height:180px;position:relative;background:url('./images/diglet.png') no-repeat;background-size:60%;background-position: center;}

JQUERY

Código (javascript) [Seleccionar] Expandir


function mostrarDig(x){
sel=$('.diglet[num='+x+']');
sel.slideDown(1000);
sel.attr("estado","si");
sel.click(function(){
$(this).slideUp(200);
$(this).attr("estado","no");
});
sel.slideUp(200);
}



Agradezco ayudas sugerencias y cualquier comentario, gracias

[EFEX]

Yo utilizaria setInterval() o setTimeout() para llamar a una funcion mostrar_topo(), mostrar aleatoriamente segun num="numero",  cuando pasen unos segundos llamar otra funcion ocultar_top(), si clickean el topo y su estado es visible ocultar y parar el contador con clearTimeout() o clearInterval().

[#!drvy]

Efectivamente como dice EFEX lo mejor es hacerlo con un timer.. aunque yo optaría mas por setTimeout() antes que setInterval().

Tienes algunos divs que no están bien cerrados (linea 9,14,16). Puedes combinar varias acciones (jQuery) para intentar no utilizar tanto $(this). Ademas te recomiendo cambiar el estado antes de realizar el slideDown/slideUp para que no haya confusión.

Código (javascript) [Seleccionar] Expandir

var mostrarDig = function(x){
  var sel=$('.diglet[num='+x+']');
  sel.attr('estado','si').slideDown(1000);
  sel.on('click',function(){
    $(this).attr('estado','no').slideUp(200);
  });
  sel.slideUp(200);
}

Por cierto, le daria a los td el mismo tamaño que al div. Lo digo mas que nada porque si 3 de los div en una misma linea reciben slideUp, el TR se quedaría sin tamaño y se reduciría.

Código (css) [Seleccionar] Expandir

#tablero table tr td {width:180px; height:180px;}

Saludos

[DanB]

Gracias a los dos por responder he aplicado vuestros consejos , pero no consigo que el evento click funcione, os pego el codigo con los cambios que he hecho, no entra al click y creo que puede ser a que cambia muy rapido el estado .

Código (javascript) [Seleccionar] Expandir


function aumentarScore(){
var sel=$("#marcador");
sel.html(puntuacion);
sel.after("<p style='margin-left: 5px; position: absolute; top: 100px; left: 200px;'>x10</p>");
sel.siblings('p').fadeOut(300)
}
var mostrarDig = function(x){
var sel=$('.diglet[num='+x+']');
if(sel.attr("estado")=="no"){
sel.attr("estado","si").slideDown(1000);
ocultarDig(x);
}
}
var  ocultarDig function(x){
var sel=$('.diglet[num='+x+']');
if(sel.attr("estado")=="si"){
sel.attr("estado","no").slideUp(800);
clearTimeout(mostrarDig);
} }

$('.diglet').bind('click',function(event){
if($(this).attr("estado")=="si"){
puntuacion+=10;
complete:aumentarScore(),
ocultarDig($(this).attr("num"));
}
});


Ahora me pondre a hacer los numeros aleatorios, que he pensando en meterlos en un array a modo de pila y hacer un FIFO para que no se genere el mismo numero dos veces al mismo tiempo, alguna sugerencia?

Gracias

[DanB]

Up xD

[EFEX]

Te falta el signo '=' en la linea 14, tambien para usar las funciones de jquery tenes que definir que el documento se haya cargado...

Código (javascript) [Seleccionar] Expandir


$(document).ready(function(){
$('.diglet').bind('click',function(event){
if($(this).attr("estado")=="si"){
puntuacion+=10;
complete:aumentarScore(),
ocultarDig($(this).attr("num"));
}
});
                // Como usar las variables.. mostrando especificamente segun numero
mostrarDig(1);
});