Überprüfen und aufräumen meine JQuery-Funktion

Question

Ich bin neu bei JQuery, habe es aber geschafft, es so zu arbeiten, wie ich will. Das Problem ist, es ist ein wenig verworren und könnte leicht außer Kontrolle geraten, wenn ich weitere Optionen hinzufügen.

Ich versuche, divs basierend auf einer Dropdown-Auswahl des Benutzers anzuzeigen und auszublenden. Ich habe ein JSFiddle mit dem gemacht, wo ich bisher bin, aber ich denke, es könnte mit einer gewissen Straffung funktionieren.

$(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>

Könnte mir jemand irgendwelche Hinweise geben? Ich bin bereit zu lernen! Übrigens verwende ich CF7, um das Formular zu erstellen.

JSFiddle: http://jsfiddle.net/rchampniss/mdy7acwn/

Answer 1

Ich habe die Lösung gefunden!

$(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>

Vielen Dank für Ihre Hilfe!