토글 3 개의 종속 입력 텍스트 상자 사용/사용 안 함

Question

이 섹션에서는 사용자가 웹 사이트에서 가져 오는 검색 결과의 필터링을 정의 할 수 있습니다. 하드 디스크 ($) 하드 디스크 (GB)의

용량

최대의

1. 가격. GB 당 비용 (
)

3 개는 모두 사용자가 변경할 수 있습니다. 그러나 3 개의 값을 정의하는 2 개의 독립 변수가 있으므로 3 개의 필터 값을 개별적으로 선택하면 결과가 0이됩니다. 즉. $300 harddisk, 100GB & Lesser than $1/GB. 해결책은 사용자가 한 번에 3 개의 필터 옵션 중 2 개를 변경하고 3 번째 필터의 값을 자동으로 결정할 수있게하는 것입니다.

문제점 : 이런 활성화/비활성화 동작해야 : 사용자 선택 필터 # 1 (price of harddisk = $100)는 다음 2 (harddisk capacity = 100GB)를 필터링하여, 그 필터 # 3에 대한 값 ($5/GB)을 선택 # 1은 자동으로 $500으로 다시 계산됩니다. 필터 # 1 (harddisk cost = $200)을 변경하려면 필터 # 2가 필터 # 1 및 # 3에 따라 Capacity of Harddisk = $40으로 변경됩니다.

어떻게 이것을 jQuery/Javascript에서 할 수 있습니까?

내 생각 : 필터를 선택한 순서대로 2 개의 값만 포함하는 스택과 같은 것을 사용할 수 있습니다. 사용자가 # 1, # 2 필터를 선택하면 스택에는 {1, 2}가 포함되어 있으므로 필터 # 3은 필터 # 1 및 # 2를 사용하여 계산됩니다. 사용자가 # 3을 선택하면 스택에서 푸시되고 3이 입력되면 {2,3}가 나오므로 필터 # 1은 필터 # 2와 # 3을 사용하여 계산됩니다. 그러나 어떻게 든이 방법으로 뭔가 잘못 될 수도 있습니다 ...

Answer 1

각 가능성에 대해 숨겨진 div가있을 수도 있습니다.

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

그들 모두는 아무도의 표시 값으로 시작 것이고, 자신의 선택이 만들어 때 그들은 당신의 JS 기능이 출시 계산 버튼을 클릭합니다. 이 함수는! = null 인 입력을 확인하고 그 값을 사용하여 답변을 계산하고 표시합니다. 일치하는 div는 다음과 같은 간단한 함수에 적절한 div 이름을 전달하여 표시 할 수 있습니다.

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