使用 jquery 有没有更好的方法来完成这个任务？

问题描述

我试图隐藏所有元素 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();
    });
});

解决方法

你可以这样做：

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

,

当一个按钮被点击并且属于那个特定的菜单时 按钮应该出现

如@freedomn-m 's comment，

您可以使用 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>