Mostrar/ocultar con each() de jquery

Yuanga · #1 (**permalink**) 28/07/2010, 10:45

Buenas a todos, a ver si me podéis ayudar con este problema que me lleva de cabeza. Tengo en un documento una capa llamada "msgid" que oculto y muestro con jquery mediante dos enlaces. El código en el documento es:

Código HTML:

<a id="ocultar">Ocultar</a> 
<a id="mostrar">Mostrar</a>
<div id="msgid">Capa a mostrar</div>

El código jquery que hace esto posible es:

Código:

$(document).ready(function(){
	$("#ocultar").click(function(){$("#msgid").slideUp(600)});
	$("#mostrar").click(function(){$("#msgid").slideDown(600)});
});

El problema es el siguiente: necesito tener varias capas a la vez en el mismo documento, y no puedo saber de antemano cuantas seran (entre 1 y 3, entre 1 y 20?) ya que eso depende de una consulta en una base de datos. Cada capa tendrá sus propios botones de mostrar/ocultar.

Hasta ahora lo único que he conseguido es ocultar y mostrar todas las capas con el mismo enlace, pero no cada una por separado. Este el código que tengo hasta ahora:

Código:

$(document).ready(function(){
	$("div#msgid").each(function(i){
		  $(this).hide();
		  $("#ocultar").each(function(j){
				$(this).click(function(){$("div#msgid").slideUp(600)});
		  });
	   	  $("#mostrar").each(function(j){
				$(this).click(function(){$("div#msgid").slideDown(600)});
		  });
	}); 
});

¿Alguna idea?

¡Gracias de antemano!

David · #2 (**permalink**) 28/07/2010, 12:58

En principio, no deberían tener el mismo id todos los <div> ni tampoco los enlaces, quizás puedes usar una clase común a todas y a partir de allí seleccionar los elementos.

sander · #3 (**permalink**) 28/07/2010, 16:28

Hola, en realidad David tiene razon los elementos no deberian tener el mismo id ya que los ids deben ser unicos.

Aun asi Jquery puede diferenciar el id al que se ha lanzando una accion, por lo que se me ocurre puedas usar el selector "next" de Jquery, siempre y cuando el orden de tus etiquetas "a" y "div" sigan el mismo orden en el que lo expones, en cuyo caso podrias hacer algo asi:

Código Javascript:

Ver original$(document).ready(function(){
    $("#ocultar").click(function(){
              $(this).next().next().slideUp(600);
        });
    $("#mostrar").click(function(){
              $(this).next().slideDown(600);
        });
});

Nota que al id="ocultar" le puse 2 nexts y al id="mostrar" solo uno.

El selector "next" de Jquery recorre etiqueta tras etiqueta, segun cuantos nexts pongas, recorrera el DOM hasta llegar a la etiqueta cuyo numero sea igual al mumero de .next() que pongas.

Saludos.

masterojitos · #4 (**permalink**) 28/07/2010, 16:49

aparte de las opciones que te han dado, creo que en el each podrias enumeralas con un indice para que se diferencien no ??

Suerte

sander · #5 (**permalink**) 28/07/2010, 16:54

Tienes razon se me fue el dedo ya esta corregido.

Saludos

caricatos · #6 (**permalink**) 28/07/2010, 20:06

Tema movido desde javascript

Yuanga · #7 (**permalink**) 29/07/2010, 02:33

Gracias por las aportaciones, de verdad. A continuación os muestro el código definitivo:

Código Javascript:

Ver original$(document).ready(function(){
    $("div#msgid").each(function(i){
        $("div#msgid").hide();
        
        $("a#ocultar").click(function(){
                $(this).next().next().slideUp(600);
        });
        $("a#mostrar").click(function(){
                $(this).next().slideDown(600);
        });
    });
});

Como veréis he añadido algunos pequeños detalles, como el each()

Código Javascript:

Ver original$("div#msgid").each(function(i){

y para que por defecto aparezcan todas ocultas he añadido:

Código Javascript:

Ver original$("div#msgid").hide();

Muchas gracias de nuevo, y perdonad si el nivel de mi pregunta no ha sido muy elevado, pero el javascript no es mi fuerte. Si os puedo echar un cable con algo de php ahí estaré!

sander · #8 (**permalink**) 29/07/2010, 07:24

Que bueno que lo solucionaste.

En cuanto a lo de PHP ahi estaremos sin falta cuando necesitemos ayuda, como dice mi lema "Uno para todos y todos para uno", que bueno que pienses igual.

Saludos.

Dany_s · #9 (**permalink**) 29/07/2010, 08:03

Eso no te va a funcionar en ie por los id repetidos, aparte no hace falta un bucle y no se recomienda acceder a un id anteponiendo un elemento elemento#id, si cuando queres acceder a una clase, elemto.class

Usa clases

Código Javascript:

Ver original<head>
<title>Prueba</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
        $("div.msgid").hide();
 
        $("a.ocultar").click(function(){
            $(this).next().next().slideUp(600);
        });
        $("a.mostrar").click(function(){
            $(this).next().slideDown(600);
        });
});
</script>
</head>
<body>
 
<a class="ocultar">Ocultar</a>
<a class="mostrar">Mostrar</a>
<div class="msgid">Capa a mostrar 1</div>
 
<br />
 
<a class="ocultar">Ocultar</a>
<a class="mostrar">Mostrar</a>
<div class="msgid">Capa a mostrar 2</div>
 
<br />
 
<a class="ocultar">Ocultar</a>
<a class="mostrar">Mostrar</a>
<div class="msgid">Capa a mostrar 3</div>
 
 
</body>
</html>