Отключить / включить 3 зависимых ввода текста

Question

У меня есть этот раздел, где пользователь может определить фильтрацию результатов поиска, которые он / она получает с веб-сайта.

1. Цена жесткого диска ($)
2. Емкость жесткого диска (ГБ)
3. Макс. Стоимость за ГБ ($ / ГБ)

Все 3 могут быть изменены пользователем. Однако, поскольку есть 2 независимые переменные, определяющие 3 значения, выбор 3 значений фильтра по отдельности может дать 0 результатов. то есть. $300 harddisk, 100GB & Lesser than $1/GB. Решение состоит в том, чтобы позволить пользователю одновременно изменять любые 2 из 3 опций фильтра и автоматически определять значение для 3-го фильтра.

Проблема: Мне нужно поведение включения / выключения, подобное этому: Когда пользователь выбирает фильтр № 1 (price of harddisk = $100), затем фильтр № 2 (harddisk capacity = 100GB), когда он выбирает значение для фильтра # 3 ($5/GB), # 1 будет автоматически пересчитан в $500. Если он должен был изменить фильтр № 1 (harddisk cost = $200), то фильтр № 2 будет изменен на Capacity of Harddisk = $40 на основе фильтров № 1 и № 3.

Как мне добиться этого в jQuery / Javascript?

Мои мысли: Что-то вроде стека, содержащего только 2 значения, в порядке выбора фильтров. Когда пользователь выбирает фильтр № 1, а затем № 2, стек содержит {1, 2}, поэтому фильтр № 3 будет рассчитан с использованием фильтров № 1 и № 2. Когда пользователь затем выбирает # 3, 1 выталкивается из стека, а 3 вводится, что приводит к {2,3}, поэтому фильтр # 1 будет рассчитан с использованием фильтров # 2 и # 3. Однако, похоже, что-то может пойти не так с этим методом ...

Answer 1

Вы также можете иметь скрытый div для каждой возможности.

<div id="opt1" style="display: none;">
<code to make calculation for option 1>
</div> 

Все они начнут с отображаемого значения none, и когда они сделают свой выбор и нажмут кнопку вычисления, он запустит функцию js.Функция проверяет, какие два входа являются! = Null, и использует их значения для вычисления и отображения своего ответа.Соответствующий div можно отобразить, передав соответствующее имя div простой функции, подобной этой:

 function ShowContent(d)
 {
  document.getElementById(d).style.display = "block" 
 }