Question

我已经开始使用.NET Core开发ASP网站，所以我想尝试以前没有尝试过的东西。我将创建一个全局对象，我可以从任何页面调用函数，因为我有一个设置，其中所有页面都使用特定的布局文件。

所以我在这里得到了这个设置：

<html>
<header>
    <css and meta stuff>
</header>
<body>
    <navbar....>
    <sidebar...>
    <div id="render-body">@RenderBody</div>
    <layout-footer....>
    <script inclusions>
</body>
</html>

调用@RenderBody()时，HTML页面将作为浏览器在两个div标签之间接收的实际页面提供。

我尝试做的是制作一个可以隐藏侧边栏的功能，因为你可能并不总是需要它，因此应该可以简单地隐藏它。

所以我写了下面这段代码：

var UniHub = {
    ToggleContextSidebar: function () {
        var $sidebarAndBody = $("#render-body", "#context-sidebar");
        $sidebarAndBody.toggleClass("hide-context-sidebar");
    }
};

哪个理论上应该正常工作？但它并没有。代码被称为正常，但找不到＃render-body和#context-sidebar。当我调试时，我发现$sidebarAndBody元素的长度为0.因此toggleClass（）实际上并没有将类应用于两个div中的任何一个。

我按下测试按钮时出现了他们：

那么为什么会这样呢？

Answer 1

您关闭#context-sidebar然后打开#render-body，因此#render-body不在#context-sidebar的上下文中（内部）。因此没有匹配的元素。

编辑：如果你想要这两个元素，你可以这样做：

$sidebarAndBody = $("#render-body, #context-sidebar");

如果您只想定位侧边栏，请使用$("#context-sidebar");

编辑：显示jQuery上下文：

＆＃13;

console.log("# of body elems inside html:", $("body", "html").length);
console.log("# of body elems inside head:", $("body", "head").length);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

jQuery找不到具有指定id的元素

1 个答案: