如果stament JQuery的

Question

好，我有一個按鈕，「水果」和「素食」的疊加如何調用的函數的。 假設我點擊水果 - 會彈出12個水果按鈕。頂部會彈出一個後退按鈕。如果我點擊後退按鈕，我想返回到有「水果」和「蔬菜」按鈕的上一頁。

我的問題：我寫了2個腳本，一個是「果」鍵和「蔬菜」按鈕，一個是返回鍵，但無論是從水果或蔬菜頁面返回。

我想作一個if else語句，這樣當恩，我點擊水果，我想回去的主網頁，我可以叫後面的功能之一，從第二個腳本

我覺得好像有是這樣做的一個簡單的方法，但我只是無法弄清楚？任何人都可以提示一下嗎？

<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應該是唯一的。所以使用class for both back按鈕

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

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

Answer 2

就躲都div和顯示兩個buttons。

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