Как упростить данный скрипт? / JQuery

306

21 ноября 2017, 22:07

Интересует такой вопрос, как можно упростить данный скрипт? Учитывая то, что он будет еще больше так как хешей еще 3 штуки, каким образом можно сократить его, сделать более мобильным? Заранее благодарен.

$(window).bind('hashchange', function () {
    if (window.location.hash == '#home') {
        $('.topnav').css('background-color', '#341f76').css('color', '#000');
        $('.bottomnav').css('background-color', '#341f76').css('color', '#000');
        $('section.nav div.topnav ul.right a.cta').css('background-color', '#522bcb').css('color', '#fff');
        $('section.nav div.bottomnav ul li a').css('color', '#fff');
        $('section.nav div.topnav h1').css('color', '#fff');
        $('section.nav div.topnav ul li i').css('color', '#fff');
        $('section.nav div.topnav ul.right a.phone').css('color', '#fff');
        $("section.nav div.bottomnav ul li a").removeClass("active");
        $('.menu1').addClass('active');
    }
    if (window.location.hash == '#about') {
        $('.topnav').css('background-color', '#ffa201').css('color', '#000');
        $('.bottomnav').css('background-color', '#ffa201').css('color', '#000');
        $('section.nav div.topnav ul.right a.cta').css('background-color', '#ffcc01').css('color', '#151515');
        $("section.nav div.bottomnav ul li a").removeClass("active");
        $('.menu2').addClass('active');
    }
    if (window.location.hash == '#services') {
        $('.topnav').css('background-color', '#354761').css('color', '#fff');
        $('.bottomnav').css('background-color', '#354761').css('color', '#fff');
        $('section.nav div.topnav ul.right a.cta').css('background-color', '#4d6680').css('color', '#fff');
        $('section.nav div.bottomnav ul li a').css('color', '#fff');
        $('section.nav div.topnav h1').css('color', '#eee');
        $('section.nav div.topnav ul li i').css('color', '#eee');
        $('section.nav div.topnav ul.right a.phone').css('color', '#eee');
        $("section.nav div.bottomnav ul li a").removeClass("active");
        $('.menu3').addClass('active');
    }
});

Answer 1

Я бы рекомендовал

Вместо .menu1, .menu2, .menu3 как раз и называть классы также, как в хэшах. Или добавлять постфикс. Например .home_page, .about_page, .services_page.
removeClass('active') - всегда повторяется, значит его можно вынести в самый верх
Все добавления стилей вынести в CSS, где они будут опираться на класс active верхнего узла - родителя. Т.е. когда у родителя появляется класс active, то применяются все стили.

В итоге после соблюдения трех пунктов код упростится до:

$(window).bind('hashchange', function () {
    let hash = window.location.href.split('#')[1];
    $("section.nav div.bottomnav ul li a").removeClass("active");
    $('.' + hash + '_page').addClass('active');
});