Как оптимизировать (сократить) вот это?

Question

[Санек]

$('.sub-menu_lvl1 li:nth-child(1) a').mouseenter(function() {
      if ($('.sub-menu_lvl2').hasClass("info-visible")) {
          $('.sub-menu_lvl2').removeClass('info-visible');
      }
      $('.sub-menu_lvl2.one').addClass('info-visible');
  });

  $('.sub-menu_lvl1 li:nth-child(2) a').mouseenter(function() {
      if ($('.sub-menu_lvl2').hasClass("info-visible")) {
          $('.sub-menu_lvl2').removeClass('info-visible');
      }
      $('.sub-menu_lvl2.two').addClass('info-visible');
  });

  $('.sub-menu_lvl1 li:nth-child(3) a').mouseenter(function() {
      if ($('.sub-menu_lvl2').hasClass("info-visible")) {
          $('.sub-menu_lvl2').removeClass('info-visible');
      }
      $('.sub-menu_lvl2.three').addClass('info-visible');
  });

  $('.sub-menu_lvl1 li:nth-child(4) a').mouseenter(function() {
      if ($('.sub-menu_lvl2').hasClass("info-visible")) {
          $('.sub-menu_lvl2').removeClass('info-visible');
      }
      $('.sub-menu_lvl2.four').addClass('info-visible');
  });

  $('.sub-menu_lvl1 li:nth-child(5) a').mouseenter(function() {
      if ($('.sub-menu_lvl2').hasClass("info-visible")) {
          $('.sub-menu_lvl2').removeClass('info-visible');
      }
      $('.sub-menu_lvl2.five').addClass('info-visible');
  });

Comments

[Ivan Stroykin]

Как минимум вынести в функцию и передавать в нее значение

Answer 1

[MrTimon]

хорошо бы было и верску увидеть, но можно и обойтись. Если делать именно так как у Вас написано то можно сделать так:

$('.sub-menu_lvl1 li a').mouseenter(function() {
    var classes = ['one','two','three','four','five']
     
    $('.sub-menu_lvl2').removeClass('info-visible');
    $('.sub-menu_lvl2.' + classes[ $(this).closest('li').index()]).addClass('info-visible');
  });

Но это не самый лучший вариант. Лучше для линка на который вы наводите прописать id или data атрибут такой же как класс который нужно сделать видимым (one, two, three, four, five ) . Ну и при наведении выбирать это значение.
тоисть ссилка должна быть <a href="#" data-visibleclass="one">...</a> и тогда:

$('.sub-menu_lvl1 li a').mouseenter(function() { 
    $('.sub-menu_lvl2').removeClass('info-visible');
    $('.sub-menu_lvl2.' + $(this).data('visibleclass')).addClass('info-visible');
  });

Comments

[Санек]

Спасибо) в чем разница между вариантами? Первый из за массива больше грузит систему?

Answer 2

[lega]

Тоже самое что и у MrTimon но без JS*