Упрощение операции jQuery

Question

Я очень ржавый с jQuery и могу использовать некоторые советы.

-

(function($) { 

    "use strict"; 

    var $navPrimary = $('.nav__primary'), 
     $navSecondary = $('.nav__secondary'), 
     $navClose  = $('.nav__close'); 

    // Primary navigation 
    $('.nav__primary__toggle').on('click', function(event) { 

    event.preventDefault(); 

    reset(); 

    if (!$navPrimary.hasClass('nav__primary--open')) { 
     $navPrimary.addClass('nav__primary--open'); 
    } 

    }); 

    // Secondary navigation 
    $('.nav__secondary__toggle').on('click', function(event) { 

    event.preventDefault(); 

    reset(); 

    if (!$navSecondary.hasClass('nav__secondary--open')) { 
     $navSecondary.addClass('nav__secondary--open'); 
    } 

    }); 


    // Navigation close 
    $('.nav__primary__close, .nav__secondary__close').on('click', function(event) { 

    event.preventDefault(); 

    reset(); 

    }); 


    // Navigation reset 
    var reset = function() { 

    if ($navPrimary.hasClass('nav__primary--open')) { 
     $navPrimary.removeClass('nav__primary--open'); 
    } 

    if ($navSecondary.hasClass('nav__secondary--open')) { 
     $navSecondary.removeClass('nav__secondary--open'); 
    } 

    } 

})(jQuery); 

-

Единственная реальная разница в названиях классов. Одной из навигаций является первичная навигация, а вторая - вторичная.

Однако навигационные переключатели расположены вне навигационных элементов.

Любое направление будет блестящим.

Благодаря

Answer 1

Просто используйте функцию и конкатенации:

(function($) { 
    "use strict"; 

    setupNav("primary"); 
    setupNav("secondary"); 

    function setupNav(navType) { 
     var $nav = $(".nav__" + navType); 

     $('.nav__' + navType + '__toggle').on('click', function(event) { 
      event.preventDefault(); 
      reset(); 

      $nav.addClass('nav__' + navType + '--open'); 
     }); 

     $('.nav__' + navType + '__close').on('click', function(event) { 
      event.preventDefault(); 
      reset(); 
     }); 
    } 

    function reset() { 
     $('.nav__primary').removeClass('nav__primary--open'); 
     $('.nav__secondary').removeClass('nav__secondary--open'); 
    } 

})(jQuery); 

Кроме того, если у вас есть несколько элементов, которые соответствуют .nav__primary или .nav__secondary, вам не нужно hasClass чек (и с просто код в вашем вопросе, он вам не нужен, даже если есть несколько элементов), поэтому я оставил его выше.

Вы должны были бы только hasClass проверить, есть ли несколько элементов согласования, где некоторые из них могут иметь класс и другие не могли бы, и вы хотели бы, чтобы добавить/удалить класс от других, основанных на ли первого одного был класс.