2010-07-13 2 views
4

이 배열로 푸시되는 것은 몇 개의 라디오 상자에 따라 다릅니다. 나는 표준 및 휠체어 좌석이있어 :자바 스크립트에서 IF와 ELSE IF가 여러 개일 경우

if(document.getElementById('standardseat').checked) { 
    //Standard seat is checked 
seatsArray.push(e.posX, e.posY); 
} 
else if(document.getElementById('wheelchairseat').checked) { 
    //Wheelchair seat is checked 
seatsArray.push("Wheelchair " + e.posX, e.posY); 
} 

그리고 이것은 동등한 형태 코드 :

<input id="standardseat" type="radio" name="seat" value="standard" /> Standard seat 
<input id="wheelchairseat" type="radio" name="seat" value="wheelchair" /> Wheelchair seat 

하지만 표준에서 분리되어 좀 더 라디오 상자에 추가 할/휠체어 석 :

<input id="backnave" type="radio" name="area" value="backnave" /> Back Nave 
<input id="frontnave" type="radio" name="area" value="frontnave" /> Front nave 
<input id="middlenave" type="radio" name="area" value="middlenave" /> Middle nave 

그리고 이것을 포함 시키려합니다. 설명을 위해 "Wheelchair seat"과 "Middle nave"를 누를 경우 푸시가 출력됩니다 ("MN, Wheelchair"+ e.posX, e.posY). 가능한 각 결과에 대해 많은 수의 코드를 수동으로 포함하지 않고이 작업을 수행 할 수있는 방법이 있습니까 (세 번째 라디오 상자를 추가 할 수도 있습니다)?

감사합니다.

답변

12

비교적 작은 수의 if 문으로 의자를 설명하는 문자열을 작성한 다음 끝에 push을 호출합니다.

은 그래서 같은 :

var desc = ""; 
if(document.getElementById('wheelchairseat').checked) { 
    //Wheelchair seat is checked 
    desc = "Wheelchair "+desc; 
} 

if(document.getElementById("backnave").checked) { 
    desc = "BN, "+desc; 
} else if(document.getElementById("middlenave").checked) { 
    desc = "MN, "+desc; 
} else if(document.getElementById("frontnave").checked) { 
    desc = "FN, "+desc; 
} 

seatsArray.push(desc + e.posX, e.posY); 

이 쉽게 블록의 추가 그룹을 고려하여 확장 할 수 있습니다.

+0

"desc ="BN, "+ desc;" "desc"를 둘 다 추가하지 마십시오. 그 자체와 다른 것? 아니면 그냥 다른 하나 추가할까요? 감사합니다 – IceDragon

+0

@ 아이스 드래곤 둘 desc? 다른 하나? 응? 문자열을 따르십시오. 비어있는 상태로 시작합니다. 휠체어 좌석 인 경우, 빈 좌석 (정상 좌석은 보통 좌석 임에주의하지 않으므로 불필요합니다)에 미리 입력하고 "BN"또는 "MN"중 하나를 앞에 붙입니다. "또는"FN "참고 : 일반 좌석에는 불필요한 쉼표가 사용됩니다. –

+1

@IceDragon : 나는 이것이 당신이 요구하는 것이라고 생각한다 : 오른쪽 (평가)은 할당 전에 계산되므로 라인이 실행되기 전의 값만 추가한다. 그것이 귀하의 질문에 답하거나 이해가되지 않으면 알려주십시오. –

1

일반적으로 if/else-if가 많은 경우 switch/case 문으로 대체하는 것이 좋습니다. 좌석의 유형 위치에서 별도의 조건 (전면/후면 중앙 /)와 같이

http://www.javascriptkit.com/javatutors/switch.shtml

자,이 반드시, 상황에 적절하지 않을 것입니다.

코드보다 세련된 접근 방식이있을 수 있지만 문맥을 완전히 이해하지는 못합니다. 이 배열로 뭐하고 있니?

+0

사용자가 저장하도록 선택하면 배열이 텍스트 파일에 기록됩니다. 전체 문서는 스캔 된 이미지의 평면도 시트 위치를 디지털 방식으로 움직일 수있는 위치로 전환하는 데 사용됩니다 (픽셀 좌표는이 단계에서 출력됩니다). 감사합니다. – IceDragon

+0

@ Carl Manaster 감사합니다. 귀하의 pickiness가 내 것만 큼 강한 것 같습니다. :) –

0

결과 문자열에 표시 할 내용을 value으로 지정하십시오. 'MN'을 원한다면 value을 'MN'으로 만드십시오.

그러면 각 가능한 상태에 대해 if 문을 쓰는 대신 input 개체를 반복하여 검사 할 개체를 찾을 수 있습니다.

각을 통해 ... 그래서 등에

var chairFormElems = document.getElementById('chairFormId').elements; 
var naveFormElems = document.getElementById('naveFormId').elements; 

그런 다음 루프를 각각의 모든 입력을 가져 오기 및 확인을 찾아보세요. 그런 다음 value 속성을 연결하여 결과 문자열을 만드십시오.

3

당신이 맞습니다, IceDragon, 옵션을 추가 할 때마다 여러 개의 if/else를 사용하는 것이 의미가 없으므로 코드를 다시 작성해야합니다. 이것을 피하는 데는 여러 가지 방법이 있습니다. selections 객체에, 우리는 사용자가 지금까지 만든 선택 사항의 추적을 유지하고 있다는

<html><body> 
    <form> 
    <p> 
     <input type="radio" name="seat" onclick="chose(this, 'Standard')" /> Standard seat 
     <input type="radio" name="seat" onclick="chose(this, 'Wheelchair')" /> Wheelchair seat 
    </p><p> 
     <input type="radio" name="area" onclick="chose(this, 'BN')" /> Back Nave 
     <input type="radio" name="area" onclick="chose(this, 'FN')" /> Front nave 
     <input type="radio" name="area" onclick="chose(this, 'MN')" /> Middle nave 
    </p> 
    </form> 
    <script> 
    // make sure to put these in the order you wish them to appear in the output 
    var selections = { area: '', seat: '' }; 
    var seatsArray = []; 
    function chose(input, value) { 
     selections[input.name] = value; 
    } 
    // call this function when user clicks the floor plan: 
    function image_clicked(e) { 
     var desc = []; 
     for (var i in selections) if (selections[i] != '') desc.push(selections[i]); 
     seatsArray.push(desc.join(', ') + ' ' + e.posX, e.posY); 
    } 
    </script> 
</body></html> 

주의 : 여기에 단지 하나의 방법입니다.그런 다음 사용자가 이미지 (또는 작업중인 코드를 트리거하는 모든 것)를 클릭하면 함수는 이미 수집 된 값의 형식을 지정하기 만합니다.

이 코드를 작성한 한 단점은 브라우저가 라디오 버튼의 상태를 캐시하는 경향이 있으므로 라디오 버튼이 이미 선택되었을 수 있지만 chose() 함수가 호출되지 않았기 때문입니다. 한 신속하고 더러운 해결 방법은 폼 태그에 ID를 추가하고 페이지로드에서이 작업을 실행하는 것입니다 :

'형태'폼 태그의 ID 속성입니다
document.getElementById('form').reset(); 

.

관련 문제