Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Mostrar/Ocultar varias capas con distintos id

Estas en el tema de Mostrar/Ocultar varias capas con distintos id en el foro de Frameworks JS en Foros del Web. Hola, estoy creando una pagina donde hay nombres de programas y al pinchar en estos se despliega la info. El efecto de ocultar/mostrar lo hago ...
  #1 (permalink)  
Antiguo 10/12/2010, 12:49
 
Fecha de Ingreso: enero-2010
Mensajes: 389
Antigüedad: 12 años
Puntos: 4
Mostrar/Ocultar varias capas con distintos id

Hola, estoy creando una pagina donde hay nombres de programas y al pinchar en estos se despliega la info. El efecto de ocultar/mostrar lo hago con jquery y este codigo js:

Código HTML:
$(document).ready(function(){
  $("#capa").hide();
  $("#ocultar").click(function(){$("#capa").hide("fast")});
  $("#mostrar").click(function(){$("#capa").show("fast")});
});
El problema es que como hay varias capas y cada capa necesita un id distinto pense en repetir el js para cada capa de la siguiente manera:

Código HTML:
$(document).ready(function(){
  $("#cambio").hide();
  $("#ocultar").click(function(){$("#cambio").hide("fast")});
  $("#mostrar").click(function(){$("#cambio").show("fast")});
  
  $("#capa2").hide();
  $("#ocultar2").click(function(){$("#capa2").hide("fast")});
  $("#mostrar2").click(function(){$("#capa2").show("fast")});
});
pero claro, habría que modificar el js cada vez que se inserte un nuevo programa y ademas esto no es nada eficaz. ¿Que me proponeis que haga para que no tenga que andar modificando el js cada vez?

Gracias.
  #2 (permalink)  
Antiguo 10/12/2010, 13:43
 
Fecha de Ingreso: junio-2008
Ubicación: Capital Federal xD
Mensajes: 1.208
Antigüedad: 13 años, 6 meses
Puntos: 35
Respuesta: Mostrar/Ocultar varias capas con distintos id

mm itenta hacer referencai a traves de this, y asignas la funcion a los nombres por class y no por id.

$(".ocultar").click(function(){$(this).hide("fast" )});
$(".mostrar").click(function(){$(this).show("fast" )});
__________________
I am Doyle please insert code.
  #3 (permalink)  
Antiguo 10/12/2010, 13:48
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 19 años, 11 meses
Puntos: 772
Hola erxaca

Muevo tu tema al foro de Frameworks y Plugins Javascript desde Javascript.

Saludos,
  #4 (permalink)  
Antiguo 10/12/2010, 14:10
 
Fecha de Ingreso: enero-2010
Mensajes: 389
Antigüedad: 12 años
Puntos: 4
Respuesta: Mostrar/Ocultar varias capas con distintos id

Cita:
Iniciado por doylelives Ver Mensaje
mm itenta hacer referencai a traves de this, y asignas la funcion a los nombres por class y no por id.

$(".ocultar").click(function(){$(this).hide("fast" )});
$(".mostrar").click(function(){$(this).show("fast" )});
¿De que forma uso el this en el div?¿si uso clases tendré que seguir añadiendo cada uno en el javascript ? Perdona si pregunto algo un poco evidente, me estoy iniciando en curso recientemente y aun no tengo mucho conocimiento.
  #5 (permalink)  
Antiguo 10/12/2010, 14:44
 
Fecha de Ingreso: junio-2008
Ubicación: Capital Federal xD
Mensajes: 1.208
Antigüedad: 13 años, 6 meses
Puntos: 35
Respuesta: Mostrar/Ocultar varias capas con distintos id

no, los class los defines una sola vez en el selector jquery
Código PHP:
$(document).ready(function(){
  $(
".ocultar").click(function(){$(this).hide("fast")});
  $(
".mostrar").click(function(){$(this).show("fast")});
}); 
luego en los elementos defines los class respectivos(suponiendo que uses enlaces).
Código PHP:
<class="ocultar">Programa 1</a>
<
class="ocultar">Programa 2</a>
<
class="ocultar">Programa 3</a
Aunque no se como es tu html de maquetacion, deberia adaptarlo a tu diseño html
__________________
I am Doyle please insert code.

Última edición por doylelives; 10/12/2010 a las 14:54
  #6 (permalink)  
Antiguo 11/12/2010, 09:37
 
Fecha de Ingreso: enero-2010
Mensajes: 389
Antigüedad: 12 años
Puntos: 4
Respuesta: Mostrar/Ocultar varias capas con distintos id

El code html es así:

Código HTML:
 <span class="">Programa 1</span>
      <div id="datos">
        Descripcion
        Version
         Descargar
      </div>

      <span class="">Programa 2</span>
      <div id="datos">
        Descripcion
        Version
        Descargar
      </div>

     ........
Y el js ahora:

Código HTML:
$(document).ready(function(){
  $(".ocultar").click(function(){$(this).hide("fast")});
  $(".mostrar").click(function(){$(this).show("fast")});
});
La idea es que al pinchar en Programa 1 por ejemplo se muestre la capa datos de ese programa y al volver a pinchar se oculte. De la forma en que me indicas unicamente se ocultaría quien tiene el class, es decir Programa 1.

Te agradezco mucho tu ayuda
  #7 (permalink)  
Antiguo 11/12/2010, 10:02
Avatar de masterpuppet
Software Craftsman
 
Fecha de Ingreso: enero-2008
Ubicación: Montevideo, Uruguay
Mensajes: 3.550
Antigüedad: 14 años
Puntos: 845
Respuesta: Mostrar/Ocultar varias capas con distintos id

JQuery no tiene un toggle para eso?, algo asi:

Código Javascript:
Ver original
  1. $(document).ready(function(){
  2.     $(".toggler").click(function(){$(this).next().toggle()});
  3. });

Código HTML:
Ver original
  1. <span class="toggler">Programa 1</span>
  2. <div id="datos">
  3.    Descripcion
  4.    Version
  5.    Descargar
  6. </div>

La verdad no utilizo JQuery pero seguramente lo tenga.

Salu2.
  #8 (permalink)  
Antiguo 11/12/2010, 10:08
 
Fecha de Ingreso: diciembre-2009
Ubicación: Misiones
Mensajes: 867
Antigüedad: 12 años, 1 mes
Puntos: 65
Respuesta: Mostrar/Ocultar varias capas con distintos id

Código HTML:
Ver original
  1.     <head>
  2.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  3.         <title>Prueba</title>
  4.         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  5.         <script src="http://cherne.net/brian/resources/jquery.hoverIntent.minified.js"></script>
  6.         <script type="text/javascript">
  7.             $(function(){
  8.               $(".titulo").click( function(){
  9.                   $(this).next().toggle('slow');
  10.               });
  11.             });
  12.         </script>
  13.         <style>
  14.             .programa{border: 1px solid #ccc; padding: 5px; margin-bottom: 3px; width: 150px}
  15.             .titulo{background: #ccc; cursor: pointer}
  16.             .desc{display: none}
  17.         </style>
  18.     </head>
  19.     <body>
  20.         <div class="programa">
  21.             <span class="titulo">Programa 1</span>
  22.             <div class="desc">
  23.                 Descripción de prog 1
  24.             </div>
  25.         </div>
  26.  
  27.         <div class="programa">
  28.             <span class="titulo">Programa 2</span>
  29.             <div class="desc">
  30.                 Descripción de prog 2
  31.             </div>
  32.         </div>
  33.     </body>
  34. </html>


bueno veo que postearon lo mismo antes jeje
  #9 (permalink)  
Antiguo 11/12/2010, 14:04
 
Fecha de Ingreso: enero-2010
Mensajes: 389
Antigüedad: 12 años
Puntos: 4
Respuesta: Mostrar/Ocultar varias capas con distintos id

Dany_s eres un maquina, es exactamente lo que necesitaba.

Muchas gracias a todos por vuestra ayuda.

Etiquetas: capas, distintos
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Tema Cerrado

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 18:05.