wie man eine Funktion in einer if-Station aufruft JQuery

Question

ok Ich habe ein Overlay mit einem Button "Obst" und "Veggie". sagen wir, ich klicke Frucht - 12 Fruchtknöpfe werden auftauchen. Ein Zurück-Button wird oben erscheinen. Wenn ich auf die Zurück-Schaltfläche klicke, möchte ich zur vorherigen Seite zurückkehren, auf der sich die Schaltfläche "Obst" und "Gemüse" befindet.

Mein Problem: Ich schrieb 2 Skripte, eine für "Obst" -Taste und "Veggie" -Taste und eine für die Zurück-Taste, aber entweder von der Obst-oder Veggie-Seite zurück.

Ich wollte eine if else Aussage so, wenn für die Ex machen, ich Früchte klicken und ich möchte zurück zur Startseite gehen, kann ich aus dem zweiten Skript eine der hinteren Funktionen aufrufen nur

Ich mag es fühlen ist eine einfache Möglichkeit, dies zu tun, aber ich kann es nicht herausfinden? kann jemand bitte darauf hinweisen?

<script> 
     $(document).ready(function(){ 
      $("#frbtn").click(function(){ 
       $("#vegbtn").hide(); 
       $(".fruit").show(); 

      }); 

      $("#vegbtn").click(function(){ 
       $("#frbtn").hide(); 
       $(".veggie").show(); 
      }); 


     }); 

     $(document).ready(function() { 
      $("#backbtn").click(function backFruit(){ 
       $(".fruit").hide(); 
       $("#vegbtn").show(); 
       $("#frbtn").show(); 
      }); 

      $("#backbtn").click(function backVeg(){ 
       $(".veggie").hide(); 
       $("#vegbtn").show(); 
       $("#frbtn").show(); 
      }); 
     }); 
    </script> 

<div id="myNav" class="overlay"> 
<!-- Button to close the overlay navigation --> 
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 

<!--back button--> 
<a href="javascript:void(0)" class="backbtn" >&#8678;</a> 
<!-- Overlay content --> 

<!--Fruits--> 
    <div class="overlay-content"> 
     <div class="row"> 
      <div class="col-xs-6"> 
       <button id="frbtn" class="overlay-icon dropbtn" >Fruits</button> 
        <div class="row"> 
         <div class="col-xs-3 fruit"> 
          <button class="dropbtn overlay-icon">Apple</button> 
         </div> 
         <div class="col-xs-3 fruit"> 
          <button class="dropbtn overlay-icon">Banana</button> 
         </div> 
         <div class="col-xs-3 fruit"> 
          <button class="dropbtn overlay-icon">Orange</button> 
         </div> 
        </div> 
       <br /> 
        <div class="row"> 
          <div class="col-xs-3 fruit"> 
           <button class="dropbtn overlay-icon">Pear</button> 
          </div> 
          <div class="col-xs-3 fruit"> 
           <button class="dropbtn overlay-icon">Melon</button> 
          </div> 
          <div class="col-xs-3 fruit"> 
           <button class="dropbtn overlay-icon">Plum</button> 
          </div> 
         </div> 
       <br /> 
        <div class="row"> 
          <div class="col-xs-3 fruit"> 
           <button class="dropbtn overlay-icon">Cherry</button> 
          </div> 
          <div class="col-xs-3 fruit"> 
           <button class="dropbtn overlay-icon">Water&#13;&#10;melon</button> 
          </div> 
          <div class="col-xs-3 fruit"> 
           <button class="dropbtn overlay-icon">Peach</button> 
          </div> 
         </div> 
       <br /> 
        <div class="row"> 
          <div class="col-xs-3 fruit"> 
           <button class="dropbtn overlay-icon">Straw&#13;&#10;berry</button> 
          </div> 
          <div class="col-xs-3 fruit"> 
           <button class="dropbtn overlay-icon">Grape</button> 
          </div> 
          <div class="col-xs-3 fruit"> 
           <button class="dropbtn overlay-icon">Ras&#13;&#10;berry</button> 
          </div> 
         </div> 
      </div> 
      <div class="col-xs-6"> 
       <button id="vegbtn" class="dropbtn overlay-icon">Veggies</button> 
        <div class="row"> 
         <div class="col-xs-3 veggie"> 
          <button class="dropbtn overlay-icon">Carrot</button> 
         </div> 
         <div class="col-xs-3 veggie"> 
          <button class="dropbtn overlay-icon">Potato</button> 
         </div> 
         <div class="col-xs-3 veggie"> 
          <button class="dropbtn overlay-icon">Tomato</button> 
         </div> 
        </div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

Id sollte eindeutig sein class for both back Taste

$(document).ready(function() { 
     $(".backbtn").click(function back(){ 

       $(".fruit").hide(); 
       $(".veggie").hide(); 
       $("#vegbtn").show(); 
       $("#frbtn").show(); 
     }); 
    }); 

Answer 2

Nur beide div verstecken .so zu verwenden und beide buttons zeigen.

$(document).on("click", "#backbtn", function() { 
      $(".fruit,.veggie").hide(); 
      $("#vegbtn,#frbtn").show(); 
     });