私のJQuery関数をチェックして整理してください

Question

私はJQueryを初めて使い慣れましたが、私が望むように動作させることができました。問題は、少し畳み込まれていて、さらにオプションを追加すると簡単に手に入らないということです。

私はユーザーのドロップダウン選択に基づいてdivを表示および非表示にしようとしています。私はこれまでのところでJSFiddleを作ったことがありますが、合理化していくことができると思います。

$(function() { 
 
    $("select").change(function() { 
 

 
     if ($(this).val() == "I have a query") { 
 
      $("#cf-query").show("slow") && $("#cf-booking").hide("slow") 
 
     } else if ($(this).val() == "I would like to book") { 
 
      $("#cf-booking").show("slow") && $("#cf-query").hide("slow") 
 

 
     } else { 
 
      $(".cf-section").hide("slow"); 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<h2>What is the nature of your enquiry*:</h2> 
 

 
<select id="cf-dd-nature"> 
 
    <option value="">--</option> 
 
    <option value="I have a query">I have a query</option> 
 
    <option value="I would like to book">I would like to Book</option> 
 
</select> 
 

 
<div class="cf-section" id="cf-query" style="display: none;"> 
 
    <h2>Query</h2> 
 
    <p>First Name:</p> 
 
    <p>Surname*:</p> 
 
    <p>Email Address*:</p> 
 
    <p>Telephone number*:</p> 
 
</div> 
 

 

 
<div class="cf-section" id="cf-booking" style="display: none;"> 
 
    <h2>Booking</h2> 
 
    <p>First Name:</p> 
 
    <p>Telephone number*:</p> 
 
</div>

誰も私に任意のポインタを与えることができますか？私は喜んで学ぶ！ ところで、私はCF7を使ってフォームをビルドしています。

JSFiddle：私は解決策を見つけたhttp://jsfiddle.net/rchampniss/mdy7acwn/

Answer 1

！あなたの助けのための

$(function() { 
 
     $('#cf-dd-nature').change(function(){ 
 
      $('.cf-section').hide(); 
 
      $('#' + $(this).val()).show(); 
 
     }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><h2>What is the nature of your enquiry*:</h2> 
 

 
<select id="cf-dd-nature"> 
 
    <option value="">--</option> 
 
    <option value="cf-query">I have a query</option> 
 
    <option value="cf-booking">I would like to Book</option> 
 
</select> 
 

 
<div class="cf-section" id="cf-query" style="display: none;"> 
 
    <h2>Query</h2> 
 
    <p>First Name:</p> 
 
    <p>Surname*:</p> 
 
    <p>Email Address*:</p> 
 
    <p>Telephone number*:</p> 
 
</div> 
 

 

 
<div class="cf-section" id="cf-booking" style="display: none;"> 
 
    <h2>Booking</h2> 
 
    <p>First Name:</p> 
 
    <p>Telephone number*:</p> 
 
</div>

ありがとう！