2010-07-13 69 views
4

所以推到這個數組取決於幾個無線電盒。我有了這個標準和輪椅席位:多個IF和ELSE如果在javascript中

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 

而且我想推也包括這個。爲了解釋,如果用戶勾選了「輪椅座位」和「中殿」,推送應該輸出(「MN,輪椅」+ e.posX,e.posY)。有沒有什麼辦法讓這種情況發生,而不需要手動包括很多其他的if for每個可能的結果(我甚至想要添加第三組無線電框)?

謝謝!

回答

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 2010-07-13 01:44:43

+0

@IceDragon這兩個desc的?另一個?是吧?跟隨字符串。它開始是空的,如果它是一個輪椅座位,它預先對空弦(這是不必要的,因爲一個普通的座位不會注意到它是一個普通的座位),並且它將預先加入「BN」或「MN」之一, 「或」FN「,請注意,普通席位會有不必要的逗號。 – 2010-07-13 01:51:48

+1

@IceDragon:我認爲這就是你要求的:右邊(評估)是在賦值之前計算的,所以它只會添加行被執行前的值。讓我知道,如果這不能回答你的問題或有意義。 – 2010-07-13 01:53:43

1

一般來說,當你有很多if/else-if時,你可以考慮用switch/case語句替換它們。現在

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

,這不一定是適合您的情況,作爲座椅的類型是從它的位置的獨立條件(前/中/背面)。

可能有比您的代碼更優雅的方法,但我並不完全瞭解上下文。你在用這個陣列做什麼?

+0

當用戶選擇保存該數組時,該數組將被寫入文本文件。整個文檔將用於將掃描圖像上的平面圖座位轉換爲數字可移動位置(像素座標是此階段的輸出)。謝謝 – IceDragon 2010-07-13 01:35:51

+0

@Carl Manaster謝謝。你的挑剔似乎和我一樣強大。 :) – 2010-07-13 01:53:57

0

使value你想要在結果字符串中出現。如果你想讓'MN'製作value'MN'。

然後,您不必爲每種可能的狀態編寫if語句,而是可以循環訪問input對象來查找檢查的對象。

獲取所有從每個的輸入,像這樣......

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

然後遍歷每發現已選中的一個。然後只需連接value屬性即可生成結果字符串。

3

你說的對,IceDragon,使用多個if/else是沒有意義的,因爲每次添加選項時,都必須重寫代碼。有很多方法可以避免這種情況。這裏只是一個方法:

<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> 

注意的是,在selections對象,我們保持了用戶迄今所做的選擇的軌道。然後,當用戶點擊圖像(或任何觸發你正在處理的代碼)時,該功能簡單地格式化已收集的值。

我寫這段代碼的方式的一個缺點是瀏覽器傾向於緩存單選按鈕的狀態,所以單選按鈕可能已經被選中,但choose()函數沒有被調用。一個快速和骯髒的解決方法是將一個ID添加到窗體標籤和頁面加載運行此:

document.getElementById('form').reset(); 

其中「形式」是表單標籤的ID屬性。