Как реализовать такой "калькулятор*?

Question

grinch_asd @grinch_asd

JavaScript

Как реализовать такой "калькулятор*?

Здравствуйте.

Стоит задача реализовать "калькулятор" на сайте. Но суть его не в подсчете стоимости, а в показе заранее заданных по условию пакетов услуг. По сути есть 3 переменных, в каждой из них по 3 пункта. Всего пакетов услуг 3. Загвоздка заключается в том, что если человек выбирает, например, 1(1), 2(1), 3(1) ему показывается пакет "а", если 1(1), 2(2), 3(3) - пакет "в" и т.д. Т.е результат зависит от нескольких пунктов. Пробовал вручную через if else прописать все возможные варианты (их не так уж много) - работает некорректно тк есть пересекающиеся условия. Калькуляторы, что находил в гугле не совсем подходят под данную задачу. Подскажите как можно реализовать данную задачу - может я плохо прописывал вручную, или не то находил в гугле, или еще что

Вопрос задан более трёх лет назад
182 просмотра

4 комментария

Подписаться 1 Простой 4 комментария

dmitriyivvvv @dmitriyivvvv

Без кода трудно понять, либо опишите подробно в каких случаях какой пакет должен быть.

Написано более трёх лет назад

grinch_asd @grinch_asd Автор вопроса

dmitriyivvvv, код примерно такой

HTML

<div class="list1">
		<input type="radio" name="usn" id="usn6"><label for="usn6">usn6</label>
		<input type="radio" name="usn" id="usn16"><label for="usn16">usn16</label>
		<input type="radio" name="usn" id="osmo"><label for="osmo">osmo</label>
	</div>
	<hr>
	

	<div>
		<input type="radio" name="docs" id="docs1_100"><label for="docs1_100">1-100</label>
		<input type="radio" name="docs" id="docs101_200"><label for="docs101_200">101-200</label>
		<input type="radio" name="docs" id="docs201_300"><label for="docs201_300">201-300</label>
	</div>
	<hr>


	<div>
		<input type="radio" name="sotr" id="sotr1_3"><label for="sotr1_3">1-3</label>
		<input type="radio" name="sotr" id="sotr4_5"><label for="sotr4_5">4-5</label>
		<input type="radio" name="sotr" id="sotr6_10"><label for="sotr6_10">6-10</label>
	</div>

JS

$('div input').click(function(){
		if (usn6.is(':checked') || usn16.is(':checked') && sotr1_3.is(':checked') && docs1_100.is(':checked')) {
			type1 = true;
			type2 = false;
			type3 = false;
			if (type1) {
				console.log('type 1 ')
			}
		}
		else if (usn6.is(':checked') || usn16.is(':checked') || osmo.is(':checked') || docs101_200.is(':checked') || sotr4_5.is(':checked') || sotr1_3.is(':checked')) {
			type2 = true;
			type3 = false;
			type1 = false;
			if (type2) {
				console.log('type 2')
			}
		}
		else if (usn6.is(':checked') || usn16.is(':checked') || osmo.is(':checked') || sotr6_10.is(':checked') || docs201_300.is(':checked') || docs301_.is(':checked') || sotr10_.is(':checked')) {
			type3 = true;
			type1 = false;
			type2 = false;
			if (type3) {
				console.log('type 3')
			}
		}
	})

Написано более трёх лет назад

dmitriyivvvv @dmitriyivvvv
grinch_asd, думаю тут еще ошибка с приоритетом операторов, например вот тут получиться следующее:
if (usn6.is(':checked') || usn16.is(':checked') && sotr1_3.is(':checked') && docs1_100.is(':checked'))

будет обработано как
usn6.is(':checked') || ((usn16.is(':checked') && sotr1_3.is(':checked')) && docs1_100.is(':checked'))

вообщем напишите подробно при каких выборах какой пакет нужен
Написано более трёх лет назад
Evgeniy @Zheleznov

Недавно решил подобную задачу, добавил классы к каждому пункту который можно выбрать, и в js повесил на них клики, типа если кликнули по пункту А и Б вывести цену 200, если по Б и С цену 300 и т.п.

Написано более трёх лет назад

Решения вопроса 2

Комментировать

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

JavaScript

+2 ещё

Простой
Почему шрифт в JS prompt() белого цвета?
- 1 подписчик
- 2 часа назад
- 31 просмотр
2

ответа
JavaScript

Простой
Выдает ошибку, сам файл не нулл(а ошибка выдается там где подключается жс), как исправить?
- 1 подписчик
- 3 часа назад
- 40 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Пустая страница, ошибок нет. JS. В чем проблема?
- 1 подписчик
- 3 часа назад
- 110 просмотров
0

ответов
JavaScript

Простой
Какой фреймворк использовать для форм JS?
- 1 подписчик
- 3 часа назад
- 45 просмотров
0

ответов
JavaScript

Простой
Почему change срабатывает раньше чем click?
- 1 подписчик
- 4 часа назад
- 59 просмотров
1

ответ
JavaScript

Простой
Как получить metadata аудио на IOS?
- 1 подписчик
- 10 часов назад
- 20 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Как отобразить массив из элементов?
- 1 подписчик
- вчера
- 99 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Неизвестные скрипты на сайте (plupload и moxie). Для чего?
- 1 подписчик
- вчера
- 115 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как сделать так, чтобы звезда падала только при скролле страницы?
- 1 подписчик
- вчера
- 89 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Почему вылезает второй слайд?
- 1 подписчик
- вчера
- 40 просмотров
1

ответ
Показать ещё Загружается…

JavaScript разработчик

summer • Ярославль

от 100 000 до 140 000 ₽

Junior JavaScript Developer

КРАФТТЕК • Санкт-Петербург

от 60 000 до 80 000 ₽

JavaScript разработчик

Мэтч

от 80 000 ₽

Написать программу иммитирующую поведение человека для выбора услуг

20 апр. 2024, в 00:08

10000 руб./за проект

Разработать мобильное приложение android "справочник студента"

20 апр. 2024, в 00:01

4000 руб./за проект

[python,go] Залить ВИДЕО в тикток

19 апр. 2024, в 23:00

5000 руб./за проект

Без кода трудно понять, либо опишите подробно в каких случаях какой пакет должен быть.
dmitriyivvvv, код примерно такой
HTML
<div class="list1"> <input type="radio" name="usn" id="usn6"><label for="usn6">usn6</label> <input type="radio" name="usn" id="usn16"><label for="usn16">usn16</label> <input type="radio" name="usn" id="osmo"><label for="osmo">osmo</label> </div> <hr> <div> <input type="radio" name="docs" id="docs1_100"><label for="docs1_100">1-100</label> <input type="radio" name="docs" id="docs101_200"><label for="docs101_200">101-200</label> <input type="radio" name="docs" id="docs201_300"><label for="docs201_300">201-300</label> </div> <hr> <div> <input type="radio" name="sotr" id="sotr1_3"><label for="sotr1_3">1-3</label> <input type="radio" name="sotr" id="sotr4_5"><label for="sotr4_5">4-5</label> <input type="radio" name="sotr" id="sotr6_10"><label for="sotr6_10">6-10</label> </div>

JS
$('div input').click(function(){ if (usn6.is(':checked') || usn16.is(':checked') && sotr1_3.is(':checked') && docs1_100.is(':checked')) { type1 = true; type2 = false; type3 = false; if (type1) { console.log('type 1 ') } } else if (usn6.is(':checked') || usn16.is(':checked') || osmo.is(':checked') || docs101_200.is(':checked') || sotr4_5.is(':checked') || sotr1_3.is(':checked')) { type2 = true; type3 = false; type1 = false; if (type2) { console.log('type 2') } } else if (usn6.is(':checked') || usn16.is(':checked') || osmo.is(':checked') || sotr6_10.is(':checked') || docs201_300.is(':checked') || docs301_.is(':checked') || sotr10_.is(':checked')) { type3 = true; type1 = false; type2 = false; if (type3) { console.log('type 3') } } })
grinch_asd, думаю тут еще ошибка с приоритетом операторов, например вот тут получиться следующее:
if (usn6.is(':checked') || usn16.is(':checked') && sotr1_3.is(':checked') && docs1_100.is(':checked'))

будет обработано как
usn6.is(':checked') || ((usn16.is(':checked') && sotr1_3.is(':checked')) && docs1_100.is(':checked'))

вообщем напишите подробно при каких выборах какой пакет нужен
Недавно решил подобную задачу, добавил классы к каждому пункту который можно выбрать, и в js повесил на них клики, типа если кликнули по пункту А и Б вывести цену 200, если по Б и С цену 300 и т.п.

Answer 1 · 2018-12-30 00:13:30

Нумеруете варианты от 0 до 2. Затем рассматриваете их как цифры числа в троичной системе. Переводите в десятичную, получаете номер от 0 до 26. Выводите пакет, соответствующий номеру.
Например, для варианта 1(0), 2(1), 3(2) получим 0*3²+1*3+2 = 5. Выводим пакет, заданный под номером 5.

Answer 2 · 2018-12-30 00:05:10

Решать через if - самое правильное в этом случае. 3 переменных по 3 пункта - это всего 27 комбинаций. Если на каждую написать свой if, то работоспособность гарантирована. Предположу, что вы попробовали оптимизировать и свернуть некоторые if-ы и допустили ошибку. Тогда просто достаточно её исправить. Если же вы уверены, что ошибки нет (и её действительно нет), то эту задачу, увы, решить алгоритмически не представляется возможным :-)

Как реализовать такой "калькулятор*?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт