如何解决使用 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>
当一个按钮被点击并且属于那个特定的菜单时 按钮应该出现
您可以使用 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。