funciones de eventos con javascript

Responder
Fran.11
Mensajes: 108
Registrado: 22 May 2012 11:23

funciones de eventos con javascript

Mensaje por Fran.11 »

Buenos días; resulta que he hecho varias funciones para que se produzca el siguiente evento:
que al hacer click en los diferentes enlaces se oculte su contenido respectivamente y al estar aculto sus respectivos "divs" cambie el escrito del enlace. Esto lo he conseguido. El problema me surje que he hecho tres funciones para los tres divs; me podrían decir como hacer para encajar todas estas instrucciones en una sola funcion? ocuparia menos y estaria todo mucho mas limpio...saludos.

Código: Seleccionar todo

function muestraOculta() {

	if(document.getElementById("contenidos_1").style.display=="block"){
       	document.getElementById("contenidos_1").style.display="none";
         
      }
       else{
       	document.getElementById("contenidos_1").style.display="block";
      }
      if(document.getElementById("contenidos_1").style.display=="none"){   
            document.getElementById("enlace_1").innerHTML="Mostrar contenidos";}
      else{document.getElementById("enlace_1").innerHTML="Ocultar contenidos";}
       
   }
function muestraOculta_2(){
       if(document.getElementById("contenidos_2").style.display=="block"){
       	document.getElementById("contenidos_2").style.display="none";
       }
       else{
       	document.getElementById("contenidos_2").style.display="block";
       }
       if(document.getElementById("contenidos_2").style.display=="none"){   
            document.getElementById("enlace_2").innerHTML="Mostrar contenidos";}
      else{document.getElementById("enlace_2").innerHTML="Ocultar contenidos";}
       
}
function muestraOculta_3(){
       if(document.getElementById("contenidos_3").style.display=="block"){
       	document.getElementById("contenidos_3").style.display="none";
       }
       else{
       	document.getElementById("contenidos_3").style.display="block";
       }
       if(document.getElementById("contenidos_3").style.display=="none"){   
            document.getElementById("enlace_3").innerHTML="Mostrar contenidos";}
      else{document.getElementById("enlace_3").innerHTML="Ocultar contenidos";}
}
JM~
Mensajes: 234
Registrado: 25 Oct 2007 11:19
Contactar:

Re: funciones de eventos con javascript

Mensaje por JM~ »

Tienes que utilizar el objeto this.
Cuando llames a la función tienes que llamarla así: muestraOculta(this)
Y en la función será:
function muestraOculta(contenido){} y ya trabajas con contenido.
[equipo]PC1|Intel Core 2 Quad 9550 3,4Ghz|ASUS P5Q PRO|4 Gb G.Skill Extreme PC2-8800 1100Mhz|Gainward HD 4870 Golden Sample 1GB GDDR5|500Gb Seagate Barracuda|Asus DRW-24B3ST|Asus Triton 81|NOX Pulsar 750W|NOX Moonlight SE||XP, W7, OpenSuse 12.1|Samsung P2370HD|||2 x 500Gb Seagate Barracuda. 1TB WD Caviar Black. 2TB WD Caviar Green|[/equipo]
Fran.11
Mensajes: 108
Registrado: 22 May 2012 11:23

Re: funciones de eventos con javascript

Mensaje por Fran.11 »

no lo acabo de entender:
esta es una funcion externa; es decir entre <script></script>, y llamando a la funcion esta : onclick="Muestraoculta(), que se incluye como atributo del xhtml.
lo podria llamar con this refiriendome al argumento de la funcion pero lo que no entiendo es el hecho de tener construidas 3 funciones como hacer para agruparlas todas en una misma funcion...
JM~
Mensajes: 234
Registrado: 25 Oct 2007 11:19
Contactar:

Re: funciones de eventos con javascript

Mensaje por JM~ »

Te quedarías con una función así:

Código: Seleccionar todo

function muestraOculta(enlace,contenido) {
	if(contenido.style.display=="block"){
		contenido.style.display="none";
	}
	else{
		contenido.style.display="block";
	}
	if(contenido.style.display=="none"){
		enlace.innerHTML="Mostrar contenidos";}
	else{enlace.innerHTML="Ocultar contenidos";}
}
Y cuando llames a la función le pasas el enlace y el contenido de igual manera que lo estas obteniendo en tu función
muestraOculta(this,document.getElementById(""))
el this te pasa el objeto desde el que lo llamas, en ese caso el enlace.
[equipo]PC1|Intel Core 2 Quad 9550 3,4Ghz|ASUS P5Q PRO|4 Gb G.Skill Extreme PC2-8800 1100Mhz|Gainward HD 4870 Golden Sample 1GB GDDR5|500Gb Seagate Barracuda|Asus DRW-24B3ST|Asus Triton 81|NOX Pulsar 750W|NOX Moonlight SE||XP, W7, OpenSuse 12.1|Samsung P2370HD|||2 x 500Gb Seagate Barracuda. 1TB WD Caviar Black. 2TB WD Caviar Green|[/equipo]
Fran.11
Mensajes: 108
Registrado: 22 May 2012 11:23

Re: funciones de eventos con javascript

Mensaje por Fran.11 »

supongo que te refieres a esto. Me funciona igual de bien; pero no habría otra formula para simplificar mas el código?

function muestraOculta(enlace_1,contenidos_1,enlace_2,contenidos_2,enlace_3,contenidos_3) {
//condiciones para el primer div(contenidos_1)y su enlace (enlace_1)
if(contenidos_1.style.display=="block"){
contenidos_1.style.display="none";
}
else{
contenidos_1.style.display="block";
}
if(contenidos_1.style.display=="none"){
enlace_1.innerHTML="Mostrar contenidos";}
else{enlace_1.innerHTML="Ocultar contenidos";}
//condiciones para el segundo div(contenidos_2)y su enlace (enlace_2)
if(contenidos_2.style.display=="block"){
contenidos_2.style.display="none";
}
else{
contenidos_2.style.display="block";
}
if(contenidos_2.style.display=="none"){
enlace_2.innerHTML="Mostrar contenidos";}
else{enlace_2.innerHTML="Ocultar contenidos";}
//condiciones para el tercer div(contenidos_3)y su enlace (enlace_3)
if(contenidos_3.style.display=="block"){
contenidos_3.style.display="none";
}
else{
contenidos_3.style.display="block";
}
if(contenidos_3.style.display=="none"){
enlace_3.innerHTML="Mostrar contenidos";}
else{enlace_3.innerHTML="Ocultar contenidos";}

}
JM~
Mensajes: 234
Registrado: 25 Oct 2007 11:19
Contactar:

Re: funciones de eventos con javascript

Mensaje por JM~ »

No, la función queda como te dije y cuando llames a la función lo haces así:
<a href="" onclick="muestraOculta(this,document.getElementById('contenidos_1'))"> //Para el enlace 1
Y igual para el resto pero cambiando el id.
[equipo]PC1|Intel Core 2 Quad 9550 3,4Ghz|ASUS P5Q PRO|4 Gb G.Skill Extreme PC2-8800 1100Mhz|Gainward HD 4870 Golden Sample 1GB GDDR5|500Gb Seagate Barracuda|Asus DRW-24B3ST|Asus Triton 81|NOX Pulsar 750W|NOX Moonlight SE||XP, W7, OpenSuse 12.1|Samsung P2370HD|||2 x 500Gb Seagate Barracuda. 1TB WD Caviar Black. 2TB WD Caviar Green|[/equipo]
Fran.11
Mensajes: 108
Registrado: 22 May 2012 11:23

Re: funciones de eventos con javascript

Mensaje por Fran.11 »

Ok, asi quedó; muchas gracias..

function muestraOculta(enlace_1,contenidos_1) {
//condiciones para el primer div(contenidos_1)y su enlace (enlace_1)
if(contenidos_1.style.display=="block"){
contenidos_1.style.display="none";
}
else{
contenidos_1.style.display="block";
}
if(contenidos_1.style.display=="none"){
enlace_1.innerHTML="Mostrar contenidos";}
else{enlace_1.innerHTML="Ocultar contenidos";}

}
Fran.11
Mensajes: 108
Registrado: 22 May 2012 11:23

Re: funciones de eventos con javascript

Mensaje por Fran.11 »

lo que , por favor , te pediria que me explicaras un poco la función; quiero decir por que al llamar a dicha funcion abiendo otros divs con diferente identificador funciona igual que con enlace_1 y contenidos_1?
JM~
Mensajes: 234
Registrado: 25 Oct 2007 11:19
Contactar:

Re: funciones de eventos con javascript

Mensaje por JM~ »

Cuando tu defines la función: function mostrarOcultar(enlace_1, contenido_1){}
yo no te puse enlace_1 ni contenido_1 sino enlace y contenido porque esas variables no hacen referencia a ningun objeto o variable en concreto, van a tomar el valor de lo que tu le pases cuando la llames. Si la llamas con mostratOcultar(this, document.getElementById("contenidos_1") pues entonces toman esos valores y si le pasas contenidos_2 pues trabajaras con contenidos_2, esa es la gracia de las funciones, sino no te ahorrarían código.

Puedes hechar un vistazo al capitulo 4, en concreto al punto 4.1.1 del manual de http://librosweb.es/javascript/
[equipo]PC1|Intel Core 2 Quad 9550 3,4Ghz|ASUS P5Q PRO|4 Gb G.Skill Extreme PC2-8800 1100Mhz|Gainward HD 4870 Golden Sample 1GB GDDR5|500Gb Seagate Barracuda|Asus DRW-24B3ST|Asus Triton 81|NOX Pulsar 750W|NOX Moonlight SE||XP, W7, OpenSuse 12.1|Samsung P2370HD|||2 x 500Gb Seagate Barracuda. 1TB WD Caviar Black. 2TB WD Caviar Green|[/equipo]
Fran.11
Mensajes: 108
Registrado: 22 May 2012 11:23

Re: funciones de eventos con javascript

Mensaje por Fran.11 »

ok, muchas gracias...
Responder