jQueryとHTMLフォーム要素で複雑な魔法を行う方法

Question

WordPressを使ってContact Form 7プラグインを使ってクライアント用のWebフォームを開発しています。

ほとんどのフォームはかなり単純ですが、ユーザーの選択に基づいてサブオプションを表示する場所があります。単純なロジック：

if user chooses this, 
    display these sub-options, 
if other choice > these sub-options, 
if another choice > other sub-options 

ここでは例を挙げます。ユーザーが注文見積もりの​​「仕上げタイプ」を選択する選択欄があります。このボックスには10個のオプションがあり、そのうちの6個には複数のサブオプション（主にY/Nラジオボタンがありますが、テキスト入力または別の選択ボックスがあります）があり、その中には表示できるサブオプションユーザーが何を選択しているかによって異なります。

私はjQueryの初心者ですが、これは私の頭を少し上回っているかもしれませんが、私は何をしようとしているのかを知っているように感じます。 。

とにかく、デフォルトでは隠されている<div>の中にサブオプションのグループがあります。 ユーザーが選択ボックスから対応するオプションを選択すると、対応するサブオプションのdivは.slideDown()になります。何か他のものが選択されると、それは.slideUp()になります。ここで

は、（明らかに不完全である）私がこれまで持っているものだ - コードの下に多くの説明は：/クリア

jQuery(document).ready(function() { 
    jQuery("#finished_types").change(function() { 
     value = jQuery(this).val(); 
     switch (value) { 
      case "Saddle Stitching" : 
       jQuery("#saddle_stitching").slideDown("fast"); 
       break; 

      case "Loose Leaf/4 Side Trim" : 
       break; 

      case "Perfect Binding" : 
       break; 

      case "Wire-O" : 
       break; 

      case "Plastic Coil" : 
       break; 

      case "Collating Only" : 
       break; 

      case "Folding Only" : 
       break; 

      case "Corner Stitching" : 
       break; 

      case "Side Stitching" : 
       break; 

      default: 
       jQuery("#saddle_stitching").slideUp("fast"); 
       jQuery("#loose_leaf").slideUp("fast"); 
       jQuery("#perfect_binding").slideUp("fast"); 
       jQuery("#wire_o").slideUp("fast"); 
       jQuery("#plastic_coil").slideUp("fast"); 
       jQuery("#collating_only").slideUp("fast"); 
       jQuery("#folding_only").slideUp("fast"); 
       jQuery("#corner_stitching").slideUp("fast"); 
       jQuery("#side_stitching").slideUp("fast"); 
     } 
    }).change();   
}); 

私のためのトリッキーな部分は、私はまた、すべてのサブオプションフィールドをリセットしたいということですユーザーが選択ボックスから別のFinished Typeを選択した場合（基本的にはいつでも非表示になります）。私は、スイッチのケースごとにコーディングするのではなく、必要以上に大規模にすることではなく、別の関数などを呼び出すことでこれを行う方法があるはずです。

また、下位レベルのサブオプションのコーディングに違いはありますか、それともほとんど同じでしょうか？

この大きな混乱を読み取る時間がかかる人に感謝します。事前に助けてくれてありがとう！

Answer 1

クラスを使用します。だからではなくなるの：

<div id="saddle_stitching">foo</div> 
<div id="loose_leaf">bar</div> 
<div id="perfect_binding">hello</div> 
<div id="wire_o">world</div> 

試してみてください。

<div id="saddle_stitching" class="extra_option">foo</div> 
<div id="loose_leaf" class="extra_option">bar</div> 
<div id="perfect_binding" class="extra_option">hello</div> 
<div id="wire_o" class="extra_option">world</div> 

をこのシナリオでは、やるだけのことができます：

jQuery('.extra_option').slideUp('fast'); 

代わりに、すべての異なるid秒をリストします。