switch文をループするためのjscriptをクローズ

Question

ループの代わりにswitch文を何らかの形で置き換えますか？

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>要素を参照します。

---

イベントの詳細については、私はIntroduction to EventsとEarly event handlersで始まる、http://quirksmode.org記事を読むことをお勧めします。

---

二つのさらなる改善のための提案：

（A）あなたが代わりに対応するメッセージを決定するswitchの文の（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を介して動作）すべての要素に同じイベントハンドラをバインドするのではなく、イベント委任を使用することができます。 、フォーム要素への参照を取得し、JavaScriptを経由して、イベントハンドラ添付

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

あるいはさらに良い：

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

を渡されたイベントオブジェクトが情報を保持しているclickイベントハンドラが<form>要素に取り付けられています。どの要素がクリックされたかについて：

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; 
    } 
}); 

また、各ラジオボタンをクリックハンドラを使用する必要がなくなります。