Как оптимизировать или сократить код который повторяется?

Question

[Сергей Котов]

В недавно начал изучать js и jquery. И в моем коде есть несколько функции, большинство строк в них повторяется. Можно ли вывести их функцию чтобы они сократились или еще как нибудь это сделать?

$(document).ready(function(){
	var nav, sect, proj, button, inbut, figur;
    	$('#evil').click(function () {
    		nav  = 'evil-navigation'; 
    		sect = 'evil-sect-one'; 
    		proj = 'evil-project-title'; 
    		button = 'evil_button'; 
    		inbut = 'evil-in-button'; 
    		figur = 'evil_figure';
			//что с низу надо как то оптимизировать она будут мого раз повторятся
			$('.navigation').addClass(nav);
			$('.sect-one').addClass(sect);
			$('.project-title').addClass(proj);
			$('.button').addClass(button);
			$('.in-button').addClass(inbut)
			$('.figure').addClass(figur);
		});
    	$('#hacker').click(function () {
    		nav  = 'hacker-navigation'; 
    		sect = 'hacker-sect-one'; 
    		proj = 'hacker-project-title'; 
    		button = 'hacker_button'; 
    		inbut = 'hacker-in-button'; 
    		figur = 'hacker_figure';

			$('.navigation').addClass(nav);
			$('.sect-one').addClass(sect);
			$('.project-title').addClass(proj);
			$('.button').addClass(button);
			$('.in-button').addClass(inbut)
			$('.figure').addClass(figur);
		});
		$('#basic').click(function () {
			$('.navigation').removeClass(nav);
			$('.sect-one').removeClass(sect);
			$('.project-title').removeClass(proj);
			$('.button').removeClass(button);
			$('.in-button').removeClass(inbut);
			$('.figure').removeClass(figur);
		});
});

Answer 1

[SagePtr]

Если делаете переключатель между тремя темами оформления, то проще сделать так:
CSS:

/* общие для всех тем */
.navigation { /* style */ }
.sect-one { /* style */ }
.project-title { /* style */ }
/* конкретные для темы evil вдобавок к общим */
body.theme-evil .navigation { /* style */ }
body.theme-evil .sect-one { /* style */ }
body.theme-evil .project-title { /* style */ }
/* конкретные для темы hacker вдобавок к общим */
body.theme-hacker .navigation { /* style */ }
body.theme-hacker .sect-one { /* style */ }
body.theme-hacker .project-title { /* style */ }
/* ..... */

Тогда JS вообще легко уменьшится до нескольких строк:

$(document).ready(function() {
  var themes = ['evil', 'hacker', 'basic'];
  var oldTheme = 'basic';
  themes.forEach(function(theme) {
    $('#' + theme).click(function() {
      $('body').removeClass('theme-' + oldTheme);
      $('body').addClass('theme-' + theme);
      oldTheme = theme;
    });
  });
});

Comments

[Сергей Котов]

Но сработает ли это с transition? Когда я меняю тему, тема меняется плавно с помошью transition

[SagePtr]

Сергей Котов, должно работать, почему нет?
Пример: https://codepen.io/anon/pen/gERzMr

[Сергей Котов]

SagePtr, если обращаться через селектор то появляется задержка, то есть кнопка меняется чуть позже. По этому к классу нужно обращаться на прямую

[Сергей Котов]

SagePtr, можно ли как то так $('#evil').click(function () {
nav = 'evil-navigation'; sect = 'evil-sect-one'; proj = 'evil-project-title'; button = 'evil_button';inbut = 'evil-in-button'; figur = 'evil_figure';
function add();
});
то есть вот эту часть превратить в функцию add
$('.navigation').addClass(nav);
$('.sect-one').addClass(sect);
$('.project-title').addClass(proj);
$('.button').addClass(button);
$('.in-button').addClass(inbut)
$('.figure').addClass(figur);

[SagePtr]

Сергей Котов, задержка - потому что transition добавил для наглядности, если убрать transition - то всё будет моментально, безо всяких задержек.

[Сергей Котов]

SagePtr, нет мне нужно именно синхронный transition. Типа 2k19 все должно быть плавным. А резки переход можно и тупа сменив основной стиль css. Хотя у уже решил этот момент сделав функцию для addclass и removeclass. И вывел в отдленый файл. Теперь ищу способ глобального glitch эффекта на сайт, а не только к тексту и картинке через before и after

Answer 2

[Сергей Котов]

Вроде решил как сократить

$(document).ready(function(){
	var nav, sect, proj, button, inbut, figur, navspan;	
function addclasss() {
  	$('.navigation').addClass(nav);
	$('.sect-one').addClass(sect);
	$('.project-title').addClass(proj);
	$('.button').addClass(button);
	$('.in-button').addClass(inbut);
	$('.figure').addClass(figur);
}
function removeclasss() {
  	$('.navspan').removeClass(navspan);
	$('.navigation').removeClass(nav);
	$('.sect-one').removeClass(sect);
	$('.project-title').removeClass(proj);
	$('.button').removeClass(button);
	$('.in-button').removeClass(inbut);
	$('.figure').removeClass(figur);
}
	$('#evil').click(function () {
		removeclasss();
		nav  = 'evil-navigation'; sect = 'evil-sect-one'; proj = 'evil-project-title'; button = 'evil_button'; inbut = 'evil-in-button'; figur = 'evil_figure';
		addclasss();
		
	});
	$('#hacker').click(function () {
		removeclasss();
		nav  = 'hacker-navigation'; sect = 'hacker-sect-one'; proj = 'hacker-project-title'; button = 'hacker_button'; inbut = 'hacker-in-button'; figur = 'hacker_figure', navspan='hacker-navspan';
		addclasss();
	});
	$('#basic').click(function () {
		removeclasss();
	});
});