Forma más corta de hacer lo siguiente

[Viturbiko]

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

[sintel_1]

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:

$(document).ready(function(){  
      $('[class*=barra_]').hide();      
      $('[class*=enlace_menu_]').hover(function(){
      var clase = $(this).attr("class");
      var arreglo_clase = clase.split("enlace_menu_");
      $('[class*=barra_' + arreglo_clase[1] + ']').show();      
      }, function(){
      var clase = $(this).attr("class");
      var arreglo_clase = clase.split("enlace_menu_");
      $('[class*=barra_' + arreglo_clase[1] + ']').hide();    
});
 

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

Saludos.

[siddartha23]

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:

var enlaces = $("a[class^='enlace_menu_']");
var barras = $("div[class^='barra_']");
 
$(enlaces).hover(function(){
     i = $(this).index();
     $(barras).eq(i).show();
}, function(){
    $(barras).eq(i).hide();
});
 

[andresgarciadev]

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:

<elemento data-show="barra_1"><elemento/>
 

Código Javascript:

$(".enlace_menu").mouseover(function(){
        $("." + $(this).attr("data-show")).show();
}).mouseout(function(){
        $("." + $(this).attr("data-show")).hide();
});