关闭jscript循环切换语句

Question

替换循环切换语句以某种方式？

Answer 1

您不必遍历所有单选按钮来查找单击的单选按钮。您可以直接通过点击的元素到你的函数：

function planeChoice(element) { 
    // element refers to the clicked radio button 
    var plane = element.value; 

    switch (plane) { 
     //... 
    } 
} 

对于工作，你必须通过this给你的函数：

<input type="radio" name="planeButton" value="152" 
     onclick="planeChoice(this)" /> 

this是指您将事件处理程序的HTML元素到，所以在这种情况下它指的是<input>元素。

---

要了解更多有关事件，我建议阅读http://quirksmode.org文章，从Introduction to Events和Early event handlers。

进一步改进

---

两个建议：

代替switch语句来确定相应的消息（A）可以使用一个地图（这是在JavaScript中只是一个普通的对象）：

var map = { 
    "152": "A small two-place-airplane for flight training", 
    "172": "The smaller of two four-place airplanes" 
    // ... 
}; 

地图也更容易维护（扩展）。

一旦你的单选按钮的值，你可以访问消息：

alert(map[plane]); 

您不限于只存储原始值（如字符串），您还可以存储功能，并呼吁他们如果你想做一些更复杂的事情。但要了解更多关于函数以及如何使用它们的信息，您应该阅读JavaScript指南。

（B）您可以使用事件委派代替相同事件处理程序绑定到每一个元素（这是通过event bubbling）。该click事件处理程序连接到<form>元素：

<form onclick="planeChoice(event)" ...> 

甚至更​​好，得到的表单元素的引用，并通过JavaScript附加事件处理程序：

document.getElementById("myForm").onclick = planeChoice; 

传递的事件对象持有信息关于哪个元素被点击：

function planeChoice (event) { 
    event = event || window.event; // for IE 
    var target = event.target || event.srcElement; // for IE 

    if(target.type === "radio") { // if a radio button is clicked 
     var plane = target.value; 
     // ... further code 
    } 
} 

Answer 2

我可以建议你尝试使用jQuery吗？这是一个有用的（和流行的）JavaScript库，可以帮助减少和简化您所需的代码。

例如，上述代码可以简化此jQuery中：

$('#myForm input:radio').click(function(){ 
    switch (this.value) { 
     case "152": 
      alert("A small two-place-airplane for flight training"); 
      break; 
     // More Options go here... 
     default: 
      alert("Error in JavaScript function planeChoice"); 
      break; 
    } 
}); 

它也将消除需要在每个单选按钮使用点击处理程序。