Как лучше и правильнее сделать калькулятор на JQuery?

Question

[Ростислав]

Необходимо сделать такой калькулятор.

Вопрос объемный, по этому объясните хотя бы в общем как лучше сделать такое.
Пока думаю так:
- цены вводятся в админке
- при загрузке страницы каждая цена присваивается атрибуту value для каждого элемента <input type="checkbox">
- jquery скрипт собирает данные каждого <input type="checkbox"> (id, value и т.д.) и помещает в объект или массив, например $checkboxes
- дальше работаем с объектом $checkboxes
- каким-то образом связываем таблицу с картинкой автомобиля (при отметке чекбокса в таблице он должен отмечаться и на картинке)

Я в JQuery не силен и часто получается так что приходится много раз рефакторить код из-за того что изначально не понятно как калькулятор будет работать в целом.
Нужно ли использовать объекты или массивы или классы?

Answer 1

[Юрий Костин]

Правильнее будет сделать на javascript. Вы ведь не планируете поддерживать совсем старые браузеры?

Сделать можно по-разному.
Лучше, конечно, сделать хорошо, чем писать спагетти-код.

Можно вообще сделать весь интерфейс через js.
Данные получить js запросом на сервер.
И на их основе всё отрисовать. Тогда не нужно будет хранить-читать ничего в DOM-е.

У вас тут есть:
1. Отображение машины (и какое-то не совсем понятное меню).
2. Табы (или что это?)
3. Таблица.

Вы не объяснили нам как это приложение должно работать.
Что происходит при клике на другие табы?
Очень мало информации.
Как только вы сможете описать полностью схему работы, вы наверняка начнёте понимать как это всё должно быть написано, ну или мы вам сможем объяснить.

Comments

[Ростислав]

Согласен, объяснил плохо. Я больше верстальщик чем js кодер, так что лучше больше html и меньше js.
Начнем с машины.
При наведении на часть машины (например дверь) появляется иконка "+".
При нажатии на "+" всплывает окно в котором нужно выбрать вид ремонта (покраска, замена и т.д.)
В зависимости от того по какому элементу был клик в это окно подгружается: название части автомобиля и чекбоксы. Например если в таблице отмечена покраска крыши, при клике на "+" над крышей, то должно показаться окно с отмеченным в нем чекбоксом "Покраска". Если в этом окне убираем отметку с чекбокса, то и в таблице она убирается.
Табы.
Это просто чекбокс со значением (коэффициент умножения для расчета стоимости). Например покраска двери для авто класса "малый" будет стоить 1000р * 1, а для класса "бизнес" - 1000р * 1,4
Таблица.
Часть скрина упустил, под таблицей есть поле "Сумма".
При отметке какого-то чекбокса (например покраска крыши) также отмечается чекбокс в окне (которое всплывает при клике по крыше автомобиля на картинке).
При отметке чекбокса происходит подсчет стоимости - значения всех отмеченных чекбоксов плюсуются и умножаются на класс авто (коэффициент).
Как-то так)

[Юрий Костин]

Я вот уже, если честно, полчаса расписываю, как это можно реализовать. Может напишите на почту?

[Юрий Костин]

Напишете*

[Юрий Костин]

Контакты можно в профиле посмотреть.

[Юрий Костин]

Эх.. а ведь только повеяло фрилансом..

https://jsfiddle.net/wop4j549/ надеюсь дальше сами разберётесь.
Извините, что не на jquery

[Юрий Костин]

Порефакторить бы там ещё.. Но уже очень хочется спать..

Answer 2

[Максим]

https://jsfiddle.net/v2pwww/b98e059L/3/
статья на ruSO