Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Cómo hacer el siguiente código más dinámico?

Estas en el tema de Cómo hacer el siguiente código más dinámico? en el foro de Frameworks JS en Foros del Web. Qué tal? Resulta que tengo el siguiente código: @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código HTML: Ver original < table border = "1" > < tr > < td ...
  #1 (permalink)  
Antiguo 13/06/2011, 13:55
Avatar de Carxl
Colaborador
 
Fecha de Ingreso: agosto-2006
Ubicación: Bogotá
Mensajes: 2.993
Antigüedad: 14 años, 2 meses
Puntos: 70
Cómo hacer el siguiente código más dinámico?

Qué tal?

Resulta que tengo el siguiente código:

Código HTML:
Ver original
  1. <table border="1">
  2. <tr>
  3. <td>
  4. <img id="imghhh1" src="images/2.jpg" />
  5. <div id="hhh1" style="display:none;">08:00 - 8:30</div>
  6. </td>
  7. </tr>

Código Javascript:
Ver original
  1. $('#imghhh1').hover(
  2.                     function(){
  3.                         var cssObj = {
  4.                           'display' : 'block',
  5.                           'background-color':'white',
  6.                           'position' : 'absolute',
  7.                           'z-index' : '100000'
  8.                         }
  9.  
  10.                         $('#hhh1').css(cssObj);
  11.                     }, function () {
  12.                         $('#hhh1').css({display:'none'});
  13.                     }
  14.                 );

Y funciona bien (para sólo un td), ahora quisiera poder crear n cantidad de td, con la misma estructura de hhh1 y que oculte/muestre su div interno respectivamente.

Lo que no sé, es como indicarle precisamente eso, que cuando haga un hover en cualquier img, se muestre el div, respectivo que la acompaña :S.

Espero me haya explicado.

Gracias de antemano
__________________
Hay 10 tipos de personas, los que entienden binario y los que no. (Anónimo)
www.programandoweb.com
  #2 (permalink)  
Antiguo 13/06/2011, 14:09
Avatar de masterpuppet
Software Craftsman
 
Fecha de Ingreso: enero-2008
Ubicación: Montevideo, Uruguay
Mensajes: 3.550
Antigüedad: 12 años, 9 meses
Puntos: 845
Respuesta: Cómo hacer el siguiente código más dinámico?

Que tal Carxl,

Si la estructura html siempre es igual puedes utilizar:

Código Javascript:
Ver original
  1. $(this).next().css(cssObj);

Saludos.
__________________
http://es.phptherightway.com/
thats us riders :)
  #3 (permalink)  
Antiguo 13/06/2011, 14:30
Avatar de tredio  
Fecha de Ingreso: noviembre-2008
Ubicación: Carabobo
Mensajes: 466
Antigüedad: 11 años, 11 meses
Puntos: 66
Respuesta: Cómo hacer el siguiente código más dinámico?

como dice masterpuppet si la estructura del html no cambia lo puedes poner asi:

Código Javascript:
Ver original
  1. $('table img').hover(
  2.                     function(){
  3.                         var cssObj = {
  4.                           'display' : 'block',
  5.                           'background-color':'white',
  6.                           'position' : 'absolute',
  7.                           'z-index' : '100000'
  8.                         }
  9.  
  10.                         $(this).next().css(cssObj);
  11.                     }, function () {
  12.                         $(this).next().css({display:'none'});
  13.                     }
  14.                 );

si la estructura no es necesariamente como la pones alli, pero el div esta en el mismo contenedor que la img o algun contenedor hijo:

Código Javascript:
Ver original
  1. $('table img').hover(
  2.                     function(){
  3.                         var cssObj = {
  4.                           'display' : 'block',
  5.                           'background-color':'white',
  6.                           'position' : 'absolute',
  7.                           'z-index' : '100000'
  8.                         }
  9.  
  10.                         $('div', $(this).parent()).css(cssObj);
  11.                     }, function () {
  12.                         $('div', $(this).parent()).css({display:'none'});
  13.                     }
  14.                 );
__________________
Extension Google Chrome
dar las gracias no cuesta nada :D
  #4 (permalink)  
Antiguo 13/06/2011, 14:33
Avatar de Carxl
Colaborador
 
Fecha de Ingreso: agosto-2006
Ubicación: Bogotá
Mensajes: 2.993
Antigüedad: 14 años, 2 meses
Puntos: 70
Respuesta: Cómo hacer el siguiente código más dinámico?

Qué tal masterpuppet? Gracias por tu respuesta

No me expliqué bien...

La idea es poder hacer:

Código HTML:
Ver original
  1. <td><img class="imghhh1" src="<?php echo site_url('images/2.jpg');?>" /><div style="display:none;">08:00 - 8:30</div></td>
  2.                             <td><img class="imghhh1" src="<?php echo site_url('images/2.jpg');?>" /><div style="display:none;">08:00</div></td>
  3.                             <td><img class="imghhh1" src="<?php echo site_url('images/2.jpg');?>" /><div style="display:none;">08:00</div></td>
  4.                             <td><img class="imghhh1" src="<?php echo site_url('images/2.jpg');?>" /><div style="display:none;">08:00</div></td>
  5.                             <td><img class="imghhh1" src="<?php echo site_url('images/2.jpg');?>" /><div style="display:none;">08:00</div></td>

Si te fijas, ya no iría los id's en img, si no clases, por lo tanto el código jquery que hice para 1 id, queda inservible si quiero aplicarlo a varios td. Y eso es lo que no sé como hacerlo, como aplicar el mismo código que tengo, entendiento que debe mostrar/ocultar el div respectivo a la imagen que le hagan hover.

Gracias de nuevo.

__________________
Hay 10 tipos de personas, los que entienden binario y los que no. (Anónimo)
www.programandoweb.com
  #5 (permalink)  
Antiguo 13/06/2011, 14:37
Avatar de Carxl
Colaborador
 
Fecha de Ingreso: agosto-2006
Ubicación: Bogotá
Mensajes: 2.993
Antigüedad: 14 años, 2 meses
Puntos: 70
Respuesta: Cómo hacer el siguiente código más dinámico?

Disculpas, no había visto el código de Tredio antes de postear y funcionó a la perfección

Muchas gracias!
__________________
Hay 10 tipos de personas, los que entienden binario y los que no. (Anónimo)
www.programandoweb.com
  #6 (permalink)  
Antiguo 13/06/2011, 14:39
Avatar de masterpuppet
Software Craftsman
 
Fecha de Ingreso: enero-2008
Ubicación: Montevideo, Uruguay
Mensajes: 3.550
Antigüedad: 12 años, 9 meses
Puntos: 845
Respuesta: Cómo hacer el siguiente código más dinámico?

Es lo mismo lo que cambia es el selector de id a clase y el estilo a aplicar a los elementos lo deberias definir fuera del hover, sino estas creando una variable local en cada mousenter, algo asi:

Código Javascript:
Ver original
  1. var styles = {
  2.     'display' : 'block',
  3.     'background-color':'white',
  4.     'position' : 'absolute',
  5.     'z-index' : '100000'
  6. }
  7.  
  8. $('.imghhh1').hover(
  9.     function() {
  10.         $(this).next().css(styles);
  11.      },
  12.      function() {
  13.         $(this).next().css({display:'none'});
  14.     }
  15. );
__________________
http://es.phptherightway.com/
thats us riders :)
  #7 (permalink)  
Antiguo 13/06/2011, 17:42
Avatar de Aijoona
Colaborador
 
Fecha de Ingreso: mayo-2011
Ubicación: Buenos Aires
Mensajes: 779
Antigüedad: 9 años, 5 meses
Puntos: 343
Respuesta: Cómo hacer el siguiente código más dinámico?

Adhiero a esto ultimo, agregando que el estilo no debería ser una variable global.
__________________
blog | @aijoona

Etiquetas: siguiente
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:00.