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

When one button is clicked and the only menu belonging to that specific button should appear

如,

您可以在 button and menu 与 class 选择器之间使用 data-attributes 到 link，如下所示：

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

使用 jquery 有没有更好的方法来完成此操作？

Is threre any better way to accomplish this using jquery?

javascript

jquery

show

hide