0

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

$(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');
  });
});

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

1 ответ 1

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, то во втором необходимо получить текущее наличие класса. Что в конечном счете, если классы могут как то независимо меняться, приведет скорее к путанице.

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.