2010-07-13 71 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属性。