Javascript 如何在if-stamentjquery中调用函数

好的，我有一个按钮“水果”和“蔬菜”覆盖。 比方说我点击水果-12个水果按钮会弹出。顶部会弹出一个后退按钮。如果我点击后退按钮，我想返回到上一个有“水果”和“蔬菜”按钮的页面

我的问题是：我写了两个脚本，一个用于“水果”按钮和“蔬菜”按钮，另一个用于“后退”按钮，但是从水果或蔬菜页面返回

我想做一个

if-else

语句，所以当我单击for-ex时，我想返回主页面，我可以从第二个脚本调用一个back函数

我觉得有一个简单的方法可以做到这一点，但我就是想不出来？有人能暗示一下吗

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

$（文档）.ready（函数（）{
$（“#frbtn”）。单击（函数（）{
$（“#vegbtn”）.hide（）；
$（“.fruit”）.show（）；
});
$（“#vegbtn”）。单击（函数（）{
$（“#frbtn”）.hide（）；
$（“.veggie”）.show（）；
});
});
$（文档）.ready（函数（）{
$（“#backbtn”）。单击（函数backbruit（）{
$（“.fruit”）.hide（）；
$（“#vegbtn”）.show（）；
$（“#frbtn”）.show（）；
});
$（“#backbtn”）。单击（函数backVeg（）{
$（“.vegie”）.hide（）；
$（“#vegbtn”）.show（）；
$（“#frbtn”）.show（）；
});
});
水果
苹果
香蕉
橙色


梨
甜瓜
梅子


樱桃
水
甜瓜
桃


麦秆
浆果
葡萄
Ras和#13
浆果
蔬菜
胡萝卜
马铃薯
西红柿

Id

应该是唯一的。因此，对两个后退按钮使用

类

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

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

只需隐藏两个
div
并显示两个
按钮即可

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

显示您的html代码来尝试我的答案@rgoatThank非常好！我猜在这种情况下，如果else是多余的，如果else不需要，因为您将显示两个div，所以在这里@Rgoat不需要它。如果我的答案有用，请用绿色勾选标记，这对将来的用户参考很有用