Как можно укоротить такую конструкцию?

235

14 апреля 2017, 21:54

Всем доброго времени! У меня получается вот такая вынужденная конструкция:

$(document).ready(function() {
  $('.sidebar_icon').click(function(e){
    e.preventDefault();
    $('.sidebar').toggleClass('sidebar_toggled');
    $('.sidebar_bg').toggleClass('sidebar_bg_toggle');
    $('.sidebar_icon-close').toggleClass('icon-close-active');
    $('.wrapper').toggleClass('wrapper_push');
    $('body').toggleClass('site-cache');
  });
  $('.sidebar_bg_toggle').click(function(e){
    e.preventDefault();
    $('.sidebar').removeClass('sidebar_toggled');
    $('.sidebar_bg').removeClass('sidebar_bg_toggle');
    $('.sidebar_icon-close').removeClass('icon-close-active');
    $('.wrapper').removeClass('wrapper_push');
    $('body').removeClass('site-cache');
  });
});

Наверное, все же это не совсем красиво. Возможно ли такую конструкцию скорректировать в плане уменьшения кода? Благодарю!

Answer 1

Мне кажется, что укорачивание подобных конструкций, скорее приведет к ухудшению читаемости. Но поскольку переключаемые пары селектор-класс в обоих случаях одинаковы, то можно попробовать написать универсальный метод. Например, такой:

  $('.sidebar_icon, .sidebar_bg_toggle').click(function(e){
    e.preventDefault();
    var tdata = { 
            ".sidebar":    "sidebar_toggled",
            ".sidebar_bg": "sidebar_bg_toggle", 
            ".sidebar_icon-close": "icon-close-active",
            ".wrapper":    "wrapper_push",
            "body":        "site-cache"
        };
    var remove = $(this).hasClass("sidebar_bg_toggle");
    $.each(tdata, function(sel, cls){
        remove ? $(sel).removeClass(cls) : $(sel).toggleClass(cls);     
    });    
  });

можно removeClass заменить на toggleClass(..., false) и попробовать еще упростить, но с другой стороны это в одном месте упростит, в другом усложнит. Т.е внутри цикла это упростит: $(sel).toggleClass(cls, state), но необходимо будет определить текущее состояние state в зависимости от того, какая кнопка нажата. И если в одному случае там всегда будет false, то во втором необходимо получить текущее наличие класса. Что в конечном счете, если классы могут как то независимо меняться, приведет скорее к путанице.