Buscar en Mundobip

Artículos | Foro

funciones de eventos con javascript

funciones de eventos con javascript

Notapor Fran.11 » 30 Nov 2012 13:53

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




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

Re: funciones de eventos con javascript

Notapor JM~ » 30 Nov 2012 15:54

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.
  PC1
  • Procesador
    Intel Core 2 Quad 9550 3,4Ghz
  • Placa base
    ASUS P5Q PRO
  • RAM
    4 Gb G.Skill Extreme PC2-8800 1100Mhz
  • Tarjeta gráfica
    Gainward HD 4870 Golden Sample 1GB GDDR5
  • Disco Duro
    500Gb Seagate Barracuda
  • Unidad Óptica
    Asus DRW-24B3ST
  • Refrigeración
    Asus Triton 81
  • Fuente alimentación
    NOX Pulsar 750W
  • Caja
    NOX Moonlight SE
  • Sonido
  • Sistema operativo
    XP, W7, OpenSuse 12.1
  • Monitor
    Samsung P2370HD
  • Teclado
  • Ratón
  • Otros
    2 x 500Gb Seagate Barracuda. 1TB WD Caviar Black. 2TB WD Caviar Green
  • Otros
Ocultar
JM~
 
Mensajes: 234
Registrado: 25 Oct 2007 11:19

Re: funciones de eventos con javascript

Notapor Fran.11 » 30 Nov 2012 16:58

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...
Fran.11
 
Mensajes: 108
Registrado: 22 May 2012 11:23

Re: funciones de eventos con javascript

Notapor JM~ » 30 Nov 2012 17:30

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.
  PC1
  • Procesador
    Intel Core 2 Quad 9550 3,4Ghz
  • Placa base
    ASUS P5Q PRO
  • RAM
    4 Gb G.Skill Extreme PC2-8800 1100Mhz
  • Tarjeta gráfica
    Gainward HD 4870 Golden Sample 1GB GDDR5
  • Disco Duro
    500Gb Seagate Barracuda
  • Unidad Óptica
    Asus DRW-24B3ST
  • Refrigeración
    Asus Triton 81
  • Fuente alimentación
    NOX Pulsar 750W
  • Caja
    NOX Moonlight SE
  • Sonido
  • Sistema operativo
    XP, W7, OpenSuse 12.1
  • Monitor
    Samsung P2370HD
  • Teclado
  • Ratón
  • Otros
    2 x 500Gb Seagate Barracuda. 1TB WD Caviar Black. 2TB WD Caviar Green
  • Otros
Ocultar
JM~
 
Mensajes: 234
Registrado: 25 Oct 2007 11:19

Re: funciones de eventos con javascript

Notapor Fran.11 » 30 Nov 2012 19:37

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

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

Re: funciones de eventos con javascript

Notapor JM~ » 30 Nov 2012 19:54

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.
  PC1
  • Procesador
    Intel Core 2 Quad 9550 3,4Ghz
  • Placa base
    ASUS P5Q PRO
  • RAM
    4 Gb G.Skill Extreme PC2-8800 1100Mhz
  • Tarjeta gráfica
    Gainward HD 4870 Golden Sample 1GB GDDR5
  • Disco Duro
    500Gb Seagate Barracuda
  • Unidad Óptica
    Asus DRW-24B3ST
  • Refrigeración
    Asus Triton 81
  • Fuente alimentación
    NOX Pulsar 750W
  • Caja
    NOX Moonlight SE
  • Sonido
  • Sistema operativo
    XP, W7, OpenSuse 12.1
  • Monitor
    Samsung P2370HD
  • Teclado
  • Ratón
  • Otros
    2 x 500Gb Seagate Barracuda. 1TB WD Caviar Black. 2TB WD Caviar Green
  • Otros
Ocultar
JM~
 
Mensajes: 234
Registrado: 25 Oct 2007 11:19

Re: funciones de eventos con javascript

Notapor Fran.11 » 30 Nov 2012 21:16

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

Notapor Fran.11 » 03 Dic 2012 12:54

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?
Fran.11
 
Mensajes: 108
Registrado: 22 May 2012 11:23

Re: funciones de eventos con javascript

Notapor JM~ » 03 Dic 2012 18:03

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/
  PC1
  • Procesador
    Intel Core 2 Quad 9550 3,4Ghz
  • Placa base
    ASUS P5Q PRO
  • RAM
    4 Gb G.Skill Extreme PC2-8800 1100Mhz
  • Tarjeta gráfica
    Gainward HD 4870 Golden Sample 1GB GDDR5
  • Disco Duro
    500Gb Seagate Barracuda
  • Unidad Óptica
    Asus DRW-24B3ST
  • Refrigeración
    Asus Triton 81
  • Fuente alimentación
    NOX Pulsar 750W
  • Caja
    NOX Moonlight SE
  • Sonido
  • Sistema operativo
    XP, W7, OpenSuse 12.1
  • Monitor
    Samsung P2370HD
  • Teclado
  • Ratón
  • Otros
    2 x 500Gb Seagate Barracuda. 1TB WD Caviar Black. 2TB WD Caviar Green
  • Otros
Ocultar
JM~
 
Mensajes: 234
Registrado: 25 Oct 2007 11:19

Re: funciones de eventos con javascript

Notapor Fran.11 » 03 Dic 2012 20:29

ok, muchas gracias...
Fran.11
 
Mensajes: 108
Registrado: 22 May 2012 11:23


Volver a Javascript

¿Quién está conectado?

Usuarios registrados: Bing [Bot], Google [Bot], Google Adsense [Bot], MSN [Bot]

cron