ocultar varias capas

Juny18 · #1 (**permalink**) 03/08/2011, 12:56

Hola, a todos, tengo el siguiente codigo

Código:

<script language="javascript">

function muestra(id){
 document.getElementById(id).style.visibility="visible";
}

Código:

<body>

<a href="#" onclick="muestra('caparoja');"><div class="texto" id="roja">Capa Roja</div></a>

<a href="#" onclick="muestra('capaverde');"><div class="texto" id="verde">Capa Verde</div></a>

<a href="#" onclick="muestra('capaanarilla');"><div class="texto" id="amarilla">Capa Amarilla</div></a>

<a href="#" onclick="muestra('capaazul');"><div class="texto" id="azul">Capa Azul</div></a>

<div class="texto" id="reset" >RESET</div></a>

<div id="caparoja"></div>
<div id="capaverde"></div>
<div id="capaanarilla"></div>
<div id="capaazul"></div>

</body>
</html>

El problema es que quiero que todas estas capas se oculten a la vez con el botón reset, pero no se como hacerlo, por que como tenia pensado hacerlo, era de esta manera

Código:

function oculta(id1,id2,id3,id4)
document.getElementById(id1,id2,id3,id4).style.visibility="hidden";

Pero resulta que no recorre bien los id, por que como veis los id no son numeros que en ese caso un bucle for y ya esta, es decir no se como hacer que los argumentos detecten esos id que tengo puestos, para poder borrar todas las capas a la vez pulsando el boton reset.

Pues nada haber que me decis, por que tengo un lio. Ufff.

Gracias

IsaBelM · #2 (**permalink**) 03/08/2011, 14:08

envuelve esos div dentro de otro div con la id que quieras. sacas la colección de elementos que tiene ese bloque que has creado

Cita:

document.getElementById(divpadre).getElementsByTag Name('div').length

ahora si puede usar un ciclo

zerokilled · #3 (**permalink**) 03/08/2011, 14:27

buenas,
el método getElementById no admite multiples argumentos, por eso no funcionará de esa forma. el código lo puedes hacer hardcoded (sentencias fijas que no tienen la posibilidad de expandirse, mala práctica) o de forma genérica. en hardcoded tendrías que escribir tantas sentencias sean necesarias de acuerdo a la cantidad de parámetros que admite la función.

Código:

// hardcode;
function foo(param1, param2, ...){
getelement(param1)...
getelement(param2)...
getelement(...)...
}

en la forma genérica, tendrías que determinar cuantos parámetros se le pasaron a la función e iterar los parámetros con un bucle para repetir una serie de instrucciones.

Código:

// genérica, nótese que no se declaran los argumentos;
function foo(){
for(var len = arguments.length, i = 0; i < len; i++) getelement(arguments[i])...
}

arguments es un objeto parecido a un array que contiene todos los argumentos pasado a la función.

nota: literalmente, getelement no es una función. es solo para describir una función que obtiene un elemento. o sea, getElementById.

IsaBelM · #4 (**permalink**) 03/08/2011, 15:54

zerokilled, entiendo lo que dices. pero, no es menos dinámico?? es decir, has de pasarle la id

Cita:

foo("elem1", "elem2", "elem3")

gracias

zerokilled · #5 (**permalink**) 03/08/2011, 16:08

depende de lo que quieras hacer y como lo quieras hacer. tu alternativa también es igual de válida. lo que difiere mi propuesta con la tuya es el requisito de la estructura de elementos. personalmente, haría lo mismo que has propuesto. no obstante, mi enfoque iba más a indicarle algunas ideas de como hacer algo similar a lo que inicialmente el autor tenia visualizado.

por cierto, el mensaje anterior lo redacte antes de que el tuyo fuera publicado. pero tal parece que me demore mucho. si hubiera leido tu mensaje, probablemente no hubiera redactado mi respuesta. reitero lo dicho lo dicho en otro tema, cosas que todos pasamos.

IsaBelM · #6 (**permalink**) 03/08/2011, 16:21

Cita:

Iniciado por zerokilled

depende de lo que quieras hacer y como lo quieras hacer. tu alternativa también es igual de válida. lo que difiere mi propuesta con la tuya es el requisito de la estructura de elementos. personalmente, haría lo mismo que has propuesto. no obstante, mi enfoque iba más a indicarle algunas ideas de como hacer algo similar a lo que inicialmente el autor tenia visualizado.

Cita:

Iniciado por zerokilled

por cierto, el mensaje anterior lo redacte antes de que el tuyo fuera publicado. pero tal parece que me demore mucho. si hubiera leido tu mensaje, probablemente no hubiera redactado mi respuesta. reitero lo dicho lo dicho en otro tema, cosas que todos pasamos.

y aunque lo hueras visto, siempre es mejor una explicación/código tuyo que lo que yo pueda aportar

un saludo

_cronos2 · #7 (**permalink**) 04/08/2011, 06:50

Y si nos vamos a navegadores un poco más modernos, otras soluciones son:

Código Javascript:

Ver original// Usando forEach
['id1', 'id2', 'id3'].forEach(function(act){ document.getElementById(act).style.visbility = 'visible'; });
 
// Usando clases
document.getElementsByClassName('texto');
// recorrer el NodeList
 
// Y la mejor para mí, usando querySelectorAll
document.querySelectorAll('a > div.texto[id]'); // Selector super complejo XD

Saludos (:

Pablo Ayala · #8 (**permalink**) 04/08/2011, 07:07

Una solucion con jquery:

<div class="texto" id="reset" >RESET</div></a>

<div id="caparoja" class="ocultar"></div>
<div id="capaverde" class="ocultar"></div>
<div id="capaanarilla" class="ocultar"></div>
<div id="capaazul" class="ocultar"></div>

$("#reset").click(function{
$('.ocultar').toggle('slow');
});

PD. Recuerda incluir la linea que llama al jquery:
https://ajax.googleapis.com/ajax/lib....6.2/jquery.js

Saludos!!!!

fedefrankk · #9 (**permalink**) 08/08/2011, 15:16

Hola viendo el tema planteado, mucho del tema no entiendo, estoy aprendiendo y se me plantea el siguiente problema, al hacel click a un boton, que lo hago de esta manera:

<din onclick por() ........>

con funciones oculto y muestro si se fijan el copdigo de abajo se oculta todas las capas y deja una visible, como puedo resumir este codigo?.

Código Javascript:

Ver originalfunction por(){
     var quo_1=document.getElementById('cam1').style.display='none';
     var quo_2=document.getElementById('p1').style.display='block';
     var quo_3=document.getElementById('s11').style.display='none'
     var quo_4=document.getElementById('sc1').style.display='none'}
function ini(){
     var quo_1=document.getElementById('cam1').style.display='block';
     var quo_2=document.getElementById('p1').style.display='none';
     var quo_3=document.getElementById('s11').style.display='none'
     var quo_4=document.getElementById('sc1').style.display='none'}
    
function ser(){
     var quo_1=document.getElementById('cam1').style.display='none';
     var quo_2=document.getElementById('p1').style.display='none';
     var quo_3=document.getElementById('s11').style.display='block';
     var quo_4=document.getElementById('sc1').style.display='none'}
function con(){
     var quo_1=document.getElementById('cam1').style.display='none';
     var quo_2=document.getElementById('p1').style.display='none';
     var quo_3=document.getElementById('s11').style.display='none';
     var quo_4=document.getElementById('sc1').style.display='block';}

Muchas gracias.
saludos a todos