使用 jquery 是否有更好的方法来完成此任务？

Question

我试图when one button is clicked and only the menu belonging to that specific button should appear 。 如果我喜欢这个，如果有更多的按钮和菜单，那将太长了。

是否有任何方法可以缩短此时间并获得所需的结果？

$(document).ready(function(){  

    $("#steps").click(function(){
        $("#calculateMenu").hide();
        $("#stepsMenu").show();    
    });

    $("#calculate").click(function(){ 
        $("#stepsMenu").hide(); 
        $("#calculateMenu").show();
    });
});

Answer 1

你可以这样做：

$("#steps,#calculate").click(function() {
  var id = $(this).attr("id");
  $("[id*=Menu]").hide();
  $("#" + id + "Menu").show();
});

id 包含Menu的所有元素都将被隐藏，然后我们将显示“正确”的元素

演示

 $("#steps,#calculate").click(function() { var id = $(this).attr("id"); $("[id*=Menu]").hide(); $("#" + id + "Menu").show(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="steps">steps</button> <button id="calculate">calculate</button> <div id="stepsMenu">stepsMenu</div> <div id="calculateMenu">calculateMenu</div>

Answer 2

单击一个按钮时，应出现属于该特定按钮的唯一菜单

正如@freedomn-m 的评论，

您可以使用data-attributes在button and menu之间链接，并结合class选择器，如下所示：

 $(".Mybutton").click(function() { var activeMenu = $(this).data('buttonname'); $(".menu").hide(); $("#" + activeMenu).show(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class='Mybutton' data-buttonname='steps'>steps</button> <button class='Mybutton' data-buttonname='calculate'>calculate</button> <button class='Mybutton' data-buttonname='finish'>finish</button> <div class='menu' id="steps">stepsMenu</div> <div class='menu' id="calculate">calculateMenu</div> <div class='menu' id="finish">finishMenu</div>