Autor Tema: [PROBLEMA] Funcion JavaScript  (Leído 759 veces)

Desconectado RumbaStereo

  • PHPero Avanzado
  • ****
  • Mensajes: 362
  • Karma: 7
  • Sexo: Masculino
  • Diseñador Grafico
    • Ver Perfil
[PROBLEMA] Funcion JavaScript
« en: 06 de Agosto de 2012, 18:02:19 pm »
Buenas a todos.

Eh estado adentrándome un poco al mundo de javascript ya que es una forma de mostrar tus proyectos de una forma mas dinamica y atrayente al usuario, les explicare mi problema:

Eh creado una función llamada oprimir(); que realiza dos animaciones que sale un div y entra otro por ambos lados.

Explico el Procedimiento: Tengo una Ventana que abre de forma o estilo LightBox; que contiene un DIV con informacion y un menu, Cuando alguien da click en dicho boton, El Div que muestra, Corre Hacia el Lado izquierdo (LEFT: -1500px;) y aparece el div que es el boton e informacion que el usuario quiere que muestre por el lado derecho (RIGHT:1500px;)

Aqui no es el Problema, el Problema es que son 5 Botones y quiero minimixar el codigo, no haciendo una funcion para cada boton, sino que una sola funcion llame Todas las DIVS o ventanas correspondientes.

Eh intentado, Dependiendo de la ID de cada boton y depende a esta la funcion la llame pero no me funciona, estoy utilizando HTML y no se si ustedes podrian ayudarme a corregir o a la vez explicarme como realizarlo.

AQUI DEJO LA FUNCION:

Código: [Seleccionar]
function oprimir() {
    $('#sale').animate( { left: '-=1500px' }, 1000 );
    $('#entra').animate( { right: '+=1860px' }, 1000 );
}

Saludos y Gracias.
El diseño maneja lo que es creatividad, entrega y amor.

Comunidad PHPeros

[PROBLEMA] Funcion JavaScript
« en: 06 de Agosto de 2012, 18:02:19 pm »

Desconectado westwest

  • PHPero Master
  • ******
  • Mensajes: 2.837
  • Karma: 104
  • Sexo: Masculino
    • Ver Perfil
Re:[PROBLEMA] Funcion JavaScript
« Respuesta #1 en: 06 de Agosto de 2012, 18:50:21 pm »
Utiliza una clase en vez de un id para los divs, y utiliza el event.target para acceder al botón clickado, y obtener su id/name/lo-que-sea para relacionarlo, algo así:
Código: [Seleccionar]
$('botones').click(function(e) { // e recoge el event;
$('#capadelosdivs > div.'+e.target.name).animate(...)
});

Desconectado RumbaStereo

  • PHPero Avanzado
  • ****
  • Mensajes: 362
  • Karma: 7
  • Sexo: Masculino
  • Diseñador Grafico
    • Ver Perfil
Re:[PROBLEMA] Funcion JavaScript
« Respuesta #2 en: 06 de Agosto de 2012, 19:17:04 pm »
Código: [Seleccionar]
$('botones').click(function(e) { // e recoge el event;
$('#capadelosdivs > div.'+e.target.name).animate(...)
});



Eh entendido un poco, pero esto significa que me tocara Añadirle a cada una de las DIVS y a cada uno de los Botones el mismo Valor ? Ejemplo Boton INICIO id="home" DIV INICIO id="inicio" ?
El diseño maneja lo que es creatividad, entrega y amor.

Desconectado westwest

  • PHPero Master
  • ******
  • Mensajes: 2.837
  • Karma: 104
  • Sexo: Masculino
    • Ver Perfil
Re:[PROBLEMA] Funcion JavaScript
« Respuesta #3 en: 06 de Agosto de 2012, 23:15:35 pm »
Código: [Seleccionar]
$('botones').click(function(e) { // e recoge el event;
$('#capadelosdivs > div.'+e.target.name).animate(...)
});



Eh entendido un poco, pero esto significa que me tocara Añadirle a cada una de las DIVS y a cada uno de los Botones el mismo Valor ? Ejemplo Boton INICIO id="home" DIV INICIO id="inicio" ?
Algo así.

Desconectado -Pituko-

  • PHPero Experto
  • *****
  • Mensajes: 954
  • Karma: 20
  • Sexo: Masculino
  • ¡Hala Madrid!
    • Ver Perfil
Re:[PROBLEMA] Funcion JavaScript
« Respuesta #4 en: 12 de Agosto de 2012, 21:07:38 pm »
Pues yo he hecho algo así para que lo modifiques cambiando los "button" por el div o elemento que quieres que sea el "botón" y puedes ir lo modificando para adaptarlo a tu sitio web.

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-1.8.0.min.js"></script>
</head>
<body>
<button id="b1" class="bot">Botón 1</button>
<button id="b2" class="bot">Botón 2</button>
<button id="b3" class="bot">Botón 3</button>
<button id="b4" class="bot">Botón 4</button>
<button id="b5" class="bot">Botón 5</button>
<script>
function oprimir(id) {
switch(id) {
case "b1":
//* Acción a realizar con el botón 1 *//
break;
case "b2":
//* Acción a realizar con el botón 2 *//
break;
case "b3":
//* Acción a realizar con el botón 3 *//
break;
case "b4":
//* Acción a realizar con el botón 4 *//
break;
case "b5":
//* Acción a realizar con el botón 5 *//
break;
}
}
$(".bot").click(function (){
var id = $(this).attr("id");
oprimir(id);
});
</script>
</body>
</html>

Suerte, y espero que te funcione.