jQuery addClass example

Change class name on click in jQuery

by adward

HTML

<main>

	<section>

		<h1>Калькулятор</h1>	

		<form class="Configurator">

			<h5>Выбор типа окна</h5>
			<div id="Окна">
				<a class="on">Стандартные</a>
				<a>Нестандартные</a>
				<span class="Стандартные вкл"></span>
				<span class="Нестандартные"></span>
			</div>

			<div class="fillcost">
				<div class="costView"></div>
				<input type="hidden" class="costVal">
			</div>

			<h5>Место установки</h5>

			<div class="Локации"></div>

			<h5>Выбор опций</h5>

			<div id="Опции">
				<a class="on">Основные</a>
				<a>Дополнительные</a>
				<span class="Основные вкл"></span>
				<span class="Дополнительные"></span>
			</div>

		</form>
	</section>
</main>

CSS

@charset "utf-8";
@-ms-viewport {width: device-width;}
@import url('https://fonts.googleapis.com/css?family=Ubuntu+Condensed|PT+Sans&subset=cyrillic-ext');



/* Reset */
html, body, main, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, a, address, em, img, strong, sub, sup, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tr, th, td, main, aside, canvas, figure, figcaption, footer, header, hgroup, menu, nav, output, section, audio, video, form, label, input, textarea { margin: 0; padding: 0; border: 0; background: transparent; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -webkit-overflow-scrolling: touch; font-weight:normal; font-size: 16px; line-height:1.4; font-family: "Segoe UI", "Roboto", "Ubuntu", "Oxygen", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif; vertical-align: top;} 

*, *:after, *::before {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
*:focus {outline: none;}

input {outline: none;}
input[name="search"] {-webkit-appearance: textfield; -webkit-box-sizing: content-box; }
input::-webkit-search-decoration, input::-webkit-search-cancel-button {display: none; }

header, section, main, footer, aside, figure, figcaption, nav, output {display: block; position:relative;} 
ol, ul { list-style: none;} 
img {max-width: 100%; height: auto; -ms-interpolation-mode: nearest-neighbor;}
button {border:none;}
a {text-decoration: none; outline:none; font-size:inherit; line-height:inherit; } 

.none {display:none;}

hr { height: 30px; border:none;background:url(/css/hr.png) center top no-repeat; margin:30px 0 20px; display:block;}


/* ОСНОВНАЯ РАЗМЕТКА
========================================================================================= */

html {width:100%; min-height:100%; background:#fff;}
body {width:100%; height:100%; vertical-align:top; position:relative; background:#fff url(/css/fon1.jpg) center top repeat-x;...

JavaScript

'use strict';
function calc_init() {
var sw1 = [];
var sw2 = [];
var sw3 = [];
var opt1 = [];
var opt2 = [];

/* ТИП ОКНА  - СТАНДАРТНЫЕ*/
sw1[0] = { name: 'Двустворчатое окно', cost: 6100, image: 'img/1-0.svg'}
sw1[1] = { name: 'Двустворчатое окно с двумя поворотно-откидными створками', cost: 8500, image: 'img/1-1.svg' }
sw1[2] = { name: 'Двустворчатое окно с одной поворотно-откидной створкой и одной поворотной створкой', cost: 8000, image: 'img/1-2.svg' }
sw1[3] = { name: 'Трёхстворчатое окно с одной поворотно-откидной створкой', cost: 7600, image: 'img/1-3.svg' }
sw1[4] = { name: 'Трёхстворчатое окно с одной поворотно-откидной створкой и одной поворотной створкой', cost: 9500, image: 'img/1-4.svg' }
sw1[5] = { name: 'Глухое трёхстворчатое окно', cost: 5200, image: 'img/1-5.svg' }
sw1[6] = { name: 'Балконный блок с дверью и одной поворотной створкой', cost: 12400, image: 'img/1-6.svg' }
sw1[7] = { name: 'Балконный блок с поворотно-откидной дверью', cost: 10300, image: 'img/1-7.svg' }

/* ТИП ОКНА  - НЕСТАНДАРТНЫЕ*/
sw2[0] = { name: 'Трапециевидное окно с одной поворотно-откидной створкой', cost: 5000, image: 'img/2-0.svg' }
sw2[1] = { name: 'Арка с одной поворотно-откидной створкой', cost: 10000, image: 'img/2-1.svg' }
sw2[2] = { name: 'Глухая арка', cost: 10000, image: 'img/2-2.svg' }
sw2[3] = { name: 'Круглое окно', cost: 10000, image: 'img/2-3.svg' }
sw2[4] = { name: 'Круглое окно с одной створкой', cost: 15000, image: 'img/2-4.svg' }
sw2[5] = { name: 'Круглое окно', cost: 20000, image: 'img/2-5.svg' }

/* ЛОКАЦИЯ */
sw3[0] = { name: 'Квартира', cost: 0 }
sw3[1] = { name: 'Дом', cost: 100 }
sw3[2] = { name: 'Офис', cost: 200 }
sw3[3] = { name: 'Дача', cost: 300 } 

/* ОСНОВНЫЕ ОПЦИИ */
opt1[0] = { name: 'Энергосбережение', cost: 600}
opt1[1] = { name: 'Солнцезащита', cost: 900 }
opt1[2] = { name: 'Безопасность', cost: 2500 }
opt1[3] = { name: 'Шумоизоляция', cost: 900}

/* ДОПОЛНИТЕЛЬНЫЕ ОПЦИИ */
opt2[0] = { name: 'Микропроветривание', cost: 100 }
opt2[1] =...