JQuery рефакторинг, как сделать простой короткий код для этого

Question

Это разные селекторы и функции. Но они очень похожи.

Есть ли способ сделать это проще?

var detailBtn = $('.doc__footer__menu__detail');
var detailModal = $('.doc__footer__detail');
var detailClose = $('.doc__footer__detail-close');

var activateDetail = function() {
    detailBtn.addClass('active');
    detailModal.addClass('active');
    detailClose.addClass('active');
    $('body').addClass('lock-scroll');
    $('html').addClass('lock-scroll');
    return false;
}

var deactivateDetail = function() {
    detailBtn.removeClass('active');
    detailModal.removeClass('active');
    detailClose.removeClass('active');
    $('body').removeClass('lock-scroll');
    $('html').removeClass('lock-scroll');
}

//
var relBtn = $('.doc__footer__menu__rel');
var relModal = $('.doc__footer__rel');
var relClose = $('.doc__footer__rel-close');

var activateRel =function() {
    relBtn.addClass('active');
    relModal.addClass('active');
    relClose.addClass('active');
    $('body').addClass('lock-scroll');
    $('html').addClass('lock-scroll');
    return false;
}

var deactivateRel = function() {
    relBtn.removeClass('active');
    relModal.removeClass('active');
    relClose.removeClass('active');
    $('body').removeClass('lock-scroll');
    $('html').removeClass('lock-scroll');
}

//
var attachBtn = $('.doc__footer__menu__attachment');
var attachModal = $('.doc__footer__attachment');
var attachClose = $('.doc__footer__attachment-close');

var activateAttach =function() {
    attachBtn.addClass('active');
    attachModal.addClass('active');
    attachClose.addClass('active');
    $('body').addClass('lock-scroll');
    $('html').addClass('lock-scroll');
    return false;
}

var deactivateAttach = function() {
    attachBtn.removeClass('active');
    attachModal.removeClass('active');
    attachClose.removeClass('active');
    $('body').removeClass('lock-scroll');
    $('html').removeClass('lock-scroll');
}

Это почти один и тот же код, за исключением слов 'detail', 'rel', 'attach'.

Stackoverflow сказал, что мой пост в основном состоит из кода, поэтому яЯ должен добавить еще некоторые детали, но я не знаю, что мне еще сказать. XD

Я полагаю, что если я использую цикл из 3 слов в качестве массива, это возможно?

Answer 1

Попробуйте переключить класс

const toggle = function(what, on) {
  $(".doc__footer__menu__" + what)     .toggleClass('active', on);
  $(".doc__footer__" + what)           .toggleClass('active', on);
  $(".doc__footer__" + what + "-close").toggleClass('active', on);
  $('body').toggleClass('lock-scroll', on);
  $('html').toggleClass('lock-scroll', on);
}

, используя

toggle('detail',true);
toggle('rel',true);

для включения

и

toggle('detail',false);
toggle('rel',false);

для выключения

Answer 2

Если вы можете отправить параметр при вызове функции, вы можете сделать что-то вроде этого:

var activateDetail = function(rule) {
  $('.doc__footer__menu__' + rule).addClass('active');
  $('.doc__footer__' + rule).addClass('active');
  $('.doc__footer__' + rule + '-close').addClass('active');
  $('body').addClass('lock-scroll');
  $('html').addClass('lock-scroll');
  return false;
}

var deactivateDetail = function(rule) {
  $('.doc__footer__menu__' + rule).removeClass('active');
  $('.doc__footer__' + rule).removeClass('active');
  $('.doc__footer__' + rule + '-close').removeClass('active');
  $('body').removeClass('lock-scroll');
  $('html').removeClass('lock-scroll');
}

activateDetail('detail');
activateDetail('rel');
activateDetail('attachment');