我不确定使用我的方法是否可以实现所需的功能,或者语法是否正确。基本上,我有一个菜单,该菜单包含显示/隐藏通过AJAX / PHP加载的div的链接。我可以通过说要在单击此链接时隐藏该类并显示该类来对结果进行硬编码。但是要跟踪我添加的更多内容,将成为很多类。因此,我试图找到一种更简单的解决方案,该解决方案可以隐藏所有类名称为“ hide-page”的页面,但显示其类名称等于单击链接的数据值的页面。
这是jQuery:
$("body").on("click", ".menu-link", function() {
$(".hide-page").hide();
var foundClass = $(this).data("class");
$(".foundClass").show();
//Ive also tried foundClass.show(); $("foundClass").show(); and $(foundClass).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="stage"></div>
<div class="menu-link" data-class="order-page">Order Page</div>
<div class="menu-link" data-class="open-orders">Open Orders</div>
<div class="menu-link" data-class="filled-orders">Filled Orders</div>
页面将用ajax加载,并插入到“ stage”中,其中主包装div的类为“ hide-page order-page”或“ hide-page open-orders”,依此类推。
注意:我使用.on("click")
而不是.click
,因为由于某种原因,后者未向使用ajax加载的内容进行注册。如果我需要提供任何信息,请告诉我,我将相应地更新答案。