@Sashochek

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

$('.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');
  });
  • Вопрос задан
  • 195 просмотров
Решения вопроса 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');
  });
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@lega
Тоже самое что и у MrTimon но без JS*
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы