Hacer función más "inteligente" (o autónoma)

[AlZuwaga]

Hola, tengo el siguiente script:

Código:

function prepara_dossier(){
	var entradas_dossier = getElementsByClassName('entradas_dossier');
	for (var i = 0; i < entradas_dossier.length; i++) {
		entradas_dossier[i].style.display = 'none';
	}
}


function desplegar(cual, imagen){
	entrada = document.getElementById(cual);
	estado = entrada.style.display;
	if(estado == 'block'){
		entrada.style.display = 'none';
		imagen.src = '/images/bot_mas.gif';
	}
	else{
		entrada.style.display = 'block';
		imagen.src = '/images/bot_menos.gif';
	}
}

window.onload = prepara_dossier;

Este afecta al siguiente trozo de HTML:

Código:

<h3 class="tit_entradas_dossier">1. Lorem <img src="/images/bot_mas.gif" onclick="desplegar('entrada_1', this)" /></h3>
<div class="entradas_dossier" id="entrada_1">
  <p>Lorem ipsum dolor sit amet.</p>
</div>

<h3 class="tit_entradas_dossier">2. Ipsum <img src="/images/bot_mas.gif" onclick="desplegar('entrada_2', this)" /></h3>
<div class="entradas_dossier" id="entrada_2">
  <p>Lorem ipsum dolor sit amet.</p>
</div>

Lo que hace es, al cargar la página, ocultar todos los elementos cuyo class name sea "entradas_dossier". Luego, mediante la imagen bot_mas.gif, lanzo la función desplegar() que lo que hace es colocar el atributo display como block/none a cada elemento con el class name "entradas_dossier" según corresponda y, además, modificar el atributo SRC de la imagen clickeada.

Bien, lo que me gustaría son dos cosas:
1- Que se pueda hacer click sobre todo el <h3> para plegar/desplegar el elemento con class "entradas_dossier" que le corresponda.
2- No tener que referenciar a dicho "entradas_dossier" por su ID.

Para esto se me ocurre que debo...
a- poder identificar unívocamente al <div> con class "entradas_dossier" que sea hermano del <h3> que lanza el evento.
b- poder identificar la <img> hija del <h3> para poder modificar su SRC

Esto es para no tener que "toquetear" mucho el HTML cada vez que haya una modificación... la idea sería darle un mayor grado de "inteligencia" al script.

¿alguna sugerencia o idea?

Saludos!

PD: versión funcional del script temporalmente en (http://) personal.alzuwaga.com.ar/numeros/001/index.php (es la parte de DOSSIER, abajo de todo)

[caricatos]

Hola:

A un "h3" también se puede poner un onclick, y si esa capa es la siguiente al h3, puedes referenciarlo con nextSibling... aunque debes tener cuidado de no poner nada entre una capa y otra, ya que un salto de línea o un espacio en blanco hay navegadores que consideran como un nodo de texto...

Podrías modificar el desplegar, pasándole como parámetro el objeto this:

function desplegar(elemento){
entrada = elemento.nextSibling;
estado = entrada.style.display;
elemento.lastChild.src = (estado == 'none') ? '/images/bot_mas.gif':'/images/bot_menos.gif';
entrada.style.display = (estado == 'none') ? 'block': 'none';
}

Saludos

[AlZuwaga]

Gracias Caricatos!!!

Con una pequeña modificación me ha quedado así:

Código:

function desplegar(elemento){
	entrada = elemento.nextSibling;
	if(entrada.nodeName == '#text'){
		entrada = entrada.nextSibling;
	}
//	alert(entrada.nodeName)
	estado = entrada.style.display;
	elemento.lastChild.src = (estado == 'none') ? '/images/bot_menos.gif' : '/images/bot_mas.gif';
	entrada.style.display = (estado == 'none') ? 'block' : 'none';
}

Funciona en IE7 y FF... no lo probé en otros navegadores.

Ahora.. ¿cómo hacer para quitar el evento onchange() del <h3> y que además cambie el cursor por "la manito" al onmouseover -pero que el onmouseover tampoco esté inline en el html-? ¿estoy siendo muy rompepelotas ?

[caricatos]

Hola:

Se me había ocurrido algo similar a la condición que pusiste, pero creo que mejor debe ser un bucle while hasta que encuentre un tag div...

Código:

	entrada = elemento.nextSibling;
	while	(entrada.nodeName != 'div')
		entrada = entrada.nextSibling;

También se puede hacer con el tag img:

Código:

	imagen = elemento.lastChild;
	while	(imagen.nodeName != 'img')
		imagen = imagen.previousSibling;

Lo de la manita es el estilo del cursor:

<h3 style="cursor: pointer;">

Con lo del "onmouseover" la verdad es que me perdí... si es el onclíck (bueno, también podría ser cualquier evento... en la misma inicialización... al mismo tiempo que ocultas las capas puedes buscar los h3's y asignarle el método desplegar al evento:
for (i = 0, h3s = document.getElementsByTagName("h3"), total = h3s.length; i < total; i++)
if (h3s[i].className == "tit_entradas_dossier") h3s[i].onclick = desplegar;

Pero con esto tendrías que retocar la cabecera de la función:

function desplegar(e) {
elemento = (event.srcElement) ? event.srcElement : e.target;
// elemento es el tag que provoca el evento
...

Saludos

[caricatos]

Hola:

Por cierto, me pareció extraño que uses getElementsByClassName, y miré en el DOM nivel 3 y no aparece, así que no parece estándar...

Saludos

[AlZuwaga]

Hola nuevamente

Lo de la manita es el estilo del cursor:

<h3 style="cursor: pointer;">

Si, pasa que se lo quería poner mediante JS porque, de estar JS deshabilitado, no tendría sentido que el cursor cambie a pointer si el div "entradas_dossier" ya está desplegado ¿me explico?

Por cierto, me pareció extraño que uses getElementsByClassName, y miré en el DOM nivel 3 y no aparece, así que no parece estándar...

El getElementsByClassName lo saqué de acá: http://muffinresearch.co.uk/archives...eluxe-edition/

Igual no importa, con la ayuda anterior fue más que suficiente!
Gracias

[caricatos]

Hola:

Iniciado por Al Zuwaga

Si, pasa que se lo quería poner mediante JS porque, de estar JS deshabilitado, no tendría sentido que el cursor cambie a pointer si el div "entradas_dossier" ya está desplegado ¿me explico?

Bueno, así como se asigna un evento bien se puede asignar un estilo: detrás del h3s[i].onclick = desplegar; se puede poner h3s[i].style.cursor = "pointer"; (encerradas ambas con llaves)

Iniciado por Al Zuwaga

Igual no importa, con la ayuda anterior fue más que suficiente!
Gracias

Eso es lo único que importa y me alegra.

Un abrazo.