Question

以某种方式用switch语句替换for循环？

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开始。

进一步改进的两点建议：

（A）你可以使用 map （它只是JavaScript中的普通对象）而不是switch语句来确定相应的消息：

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)" ...>

或者甚至更好，获取对form元素的引用并通过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;
    }
});

它还消除了在每个单选按钮上使用点击处理程序的需要。

关闭jscript for循环切换语句

2 个答案: