Mostrar/Ocultar varias capas con distintos id

erxaca · #1 (**permalink**) 10/12/2010, 12:49

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.

doylelives · #2 (**permalink**) 10/12/2010, 13:43

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" )});

JavierB · #3 (**permalink**) 10/12/2010, 13:48

Hola erxaca

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

Saludos,

erxaca · #4 (**permalink**) 10/12/2010, 14:10

Cita:

Iniciado por doylelives

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.

doylelives · #5 (**permalink**) 10/12/2010, 14:44

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:

  <a class="ocultar">Programa 1</a>
<a class="ocultar">Programa 2</a>
<a class="ocultar">Programa 3</a>

Aunque no se como es tu html de maquetacion, deberia adaptarlo a tu diseño html

erxaca · #6 (**permalink**) 11/12/2010, 09:37

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

masterpuppet · #7 (**permalink**) 11/12/2010, 10:02

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

Código Javascript:

Ver original$(document).ready(function(){
    $(".toggler").click(function(){$(this).next().toggle()});
});

Código HTML:

Ver original<span class="toggler">Programa 1</span>
<div id="datos">
   Descripcion
   Version
   Descargar
</div>

La verdad no utilizo JQuery pero seguramente lo tenga.

Salu2.

Dany_s · #8 (**permalink**) 11/12/2010, 10:08

Código HTML:

Ver original<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Prueba</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script src="http://cherne.net/brian/resources/jquery.hoverIntent.minified.js"></script>
        <script type="text/javascript">
            $(function(){
              $(".titulo").click( function(){
                  $(this).next().toggle('slow');
              });
            });
        </script>
        <style>
            .programa{border: 1px solid #ccc; padding: 5px; margin-bottom: 3px; width: 150px}
            .titulo{background: #ccc; cursor: pointer}
            .desc{display: none}
        </style>
    </head>
    <body>
        <div class="programa">
            <span class="titulo">Programa 1</span>
            <div class="desc">
                Descripción de prog 1
            </div>
        </div>
 
        <div class="programa">
            <span class="titulo">Programa 2</span>
            <div class="desc">
                Descripción de prog 2
            </div>
        </div>
    </body>
</html>

bueno veo que postearon lo mismo antes jeje

erxaca · #9 (**permalink**) 11/12/2010, 14:04

Dany_s eres un maquina, es exactamente lo que necesitaba.

Muchas gracias a todos por vuestra ayuda.