Foros del Web » Programando para Internet » Jquery »

Forma más corta de hacer lo siguiente

Estas en el tema de Forma más corta de hacer lo siguiente en el foro de Jquery en Foros del Web. Buenas, estoy aprendiendo jQuery y quería que al pasar el ratón por encima de unos elementos de menú se mostrase una clase, y al quitar ...
  #1 (permalink)  
Antiguo 05/11/2015, 14:56
 
Fecha de Ingreso: septiembre-2014
Mensajes: 72
Antigüedad: 9 años, 6 meses
Puntos: 0
Forma más corta de hacer lo siguiente

Buenas, estoy aprendiendo jQuery y quería que al pasar el ratón por encima de unos elementos de menú se mostrase una clase, y al quitar el ratón se ocultase, y lo he hecho asi:

Código:
 $(document).ready(function(){

      $(".enlace_menu_1").mouseover(function(){
        $(".barra_1").show();
      });
      
      $(".enlace_menu_1").mouseout(function(){
        $(".barra_1").hide();
      });

      $(".enlace_menu_2").mouseover(function(){
        $(".barra_2").show();
      });
      
      $(".enlace_menu_2").mouseout(function(){
        $(".barra_2").hide();
      });

      $(".enlace_menu_3").mouseover(function(){
        $(".barra_3").show();
      });
      
      $(".enlace_menu_3").mouseout(function(){
        $(".barra_3").hide();
      });

      $(".enlace_menu_4").mouseover(function(){
        $(".barra_4").show();
      });
      
      $(".enlace_menu_4").mouseout(function(){
        $(".barra_4").hide();
      });

      $(".enlace_menu_5").mouseover(function(){
        $(".barra_5").show();
      });
      
      $(".enlace_menu_5").mouseout(function(){
        $(".barra_5").hide();
      });
    });
El apaño funciona, pero si hubiese 300 elementos de menú supongo que habría otra forma de hacerlo. ¿Alguna idea?

Gracias y un saludo
  #2 (permalink)  
Antiguo 05/11/2015, 18:12
 
Fecha de Ingreso: enero-2014
Ubicación: Navarra
Mensajes: 94
Antigüedad: 10 años, 2 meses
Puntos: 18
Respuesta: Forma más corta de hacer lo siguiente

Hola.

Habria que ver el codigo html para optimizar el selector, con los datos que das
yo usaria el metodo hover() para indicar lo que debe hacer al hacer un onmouseover y onmouseout.

seleccionaria los elementos con $('[class*=enlace_menu_]') asi indicas que seleccone los que contienen una clase enlace_menu_

y con la funcion split() obtienes un array con el numero.

faltaria pulirlo un poco por si tienes mas de una clase en ese elemento etc..

Código Javascript:
Ver original
  1. $(document).ready(function(){  
  2.       $('[class*=barra_]').hide();      
  3.       $('[class*=enlace_menu_]').hover(function(){
  4.       var clase = $(this).attr("class");
  5.       var arreglo_clase = clase.split("enlace_menu_");
  6.       $('[class*=barra_' + arreglo_clase[1] + ']').show();      
  7.       }, function(){
  8.       var clase = $(this).attr("class");
  9.       var arreglo_clase = clase.split("enlace_menu_");
  10.       $('[class*=barra_' + arreglo_clase[1] + ']').hide();    
  11. });

depende de como tengas delaradas las clases en el html, lo mismo ni funciona

Saludos.
  #3 (permalink)  
Antiguo 07/11/2015, 22:52
Avatar de siddartha23  
Fecha de Ingreso: septiembre-2013
Mensajes: 357
Antigüedad: 10 años, 6 meses
Puntos: 39
Respuesta: Forma más corta de hacer lo siguiente

Siempre que estén correctamente alineados en el DOM yo haría dos arrays y en otra función los conectaría mediante su index, así:
Código Javascript:
Ver original
  1. var enlaces = $("a[class^='enlace_menu_']");
  2. var barras = $("div[class^='barra_']");
  3.  
  4. $(enlaces).hover(function(){
  5.      i = $(this).index();
  6.      $(barras).eq(i).show();
  7. }, function(){
  8.     $(barras).eq(i).hide();
  9. });
__________________
velarde23.com - Soluciones Web
  #4 (permalink)  
Antiguo 09/11/2015, 10:16
Avatar de andresgarciadev  
Fecha de Ingreso: junio-2013
Mensajes: 218
Antigüedad: 10 años, 9 meses
Puntos: 32
Respuesta: Forma más corta de hacer lo siguiente

en mi caso le pondria a todos la clase "enlace_menu"
y a cada uno le pondria un diferent atributo data en el html
Código HTML:
Ver original
  1. <elemento data-show="barra_1"><elemento/>
Código Javascript:
Ver original
  1. $(".enlace_menu").mouseover(function(){
  2.         $("." + $(this).attr("data-show")).show();
  3. }).mouseout(function(){
  4.         $("." + $(this).attr("data-show")).hide();
  5. });

Etiquetas: corta, forma, 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 05:49.