html - jQuery / 元素在加载时自动隐藏

Question

我正在处理.net web api 单页应用程序分配。我目前在客户端使用jQuery时遇到问题。

Myindex.cshtml有一个网格，其中包含很少的<div>元素，例如loginDiv, registerDiv, dataDiv, searchDiv, logoutDiv（请注意，这些也是它们的元素#id）。我试图做的是在用户进入我的index页面后隐藏特定元素。我所有的元素默认情况下都是可见的，所以我.hide()在我的脚本中使用我不想被看到的元素的方法。

这是我scrtip.js到目前为止的样子：

$(document).ready(function () {

    var host = "http://" + window.location.host + "/";
    var festivalsEndPoint = "api/festivali";
    var registerEndPoint = "api/Account/Register";
    var loginEndPoint = "Token";

    var formAction = "POST";
    var editingId;

    var token = null;
    var headers = {};
     
    
    $("#searchDiv").hide();
    $("#createEditDiv").hide();
    $("#logoutDiv").hide();


    $("body").ready(function () {
       
        loadAll();

    });

    function loadAll() {
        
        var requestUrl = host + festivalsEndPoint;
        $.getJSON(requestUrl, fillData);

        var dropdownUrl = host + "api/mesta";
        $.getJSON(dropdownUrl, fillDropDown);
    }
});

我的index.cshtml：

@section Scripts{
    @Scripts.Render("~/Scripts/script.js")
}

<div class="main-container">

    <div class="grid-container">

        <div id="header" class="item1"><h1>My project</h1></div>

        <div id="registerDiv" class="item2" >
            <p class="form-title"><b>Register form</b></p>
            <form id="registerForm" method="post" action="post/">
                <p>
                    <label>E-mail</label>
                    <input id="registerEmail" type="text">
                </p>
                <p>
                    <label>Password</label>
                    <input id="registerPsw" type="password">
                </p>
                <p>
                    <label>Confirm password</label>
                    <input id="registerPswConfirm" type="password">
                </p>
                <button id="registerBtn" type="submit">Register</button>
                <p id="registrationSuccessful"><b>Registration was successful! You can now log-in...</b> </p>


            </form>
        </div>


        <div id="loginDiv" class="item3">
            <p class="form-title"><b>Login form</b></p>

            <form id="loginForm" method="post" action="post/">
                <p>
                    <label>E-mail</label>
                    <input id="loginEmail" type="text">
                </p>
                <p>
                    <label>Password</label>
                    <input id="loginPsw" type="password">
                </p>
                <button id="loginBtn" type="submit">Sign-in</button>
            </form>
        </div>


        <div id="dataDiv" class="item4">

        </div>


        <div id="logoutDiv" class="item5">
            <p class="form-title"><b>Account</b></p>
            <p id="loggedUser">Logged in user: [e-mail]</p>
            <p><button id="logoutBtn" class="btn-danger">Logout</button></p>

        </div>


        <div id="searchDiv" class="item7">
            <p class="form-title"><b>Search</b></p>
            <form id="searchForm" method="post" action="post/">
                <p>
                    <label>Criterium 1</label>
                    <input type="text">
                </p>
                <p>
                    <label>Criterium 1</label>
                    <input type="password">
                </p>

                <button id="searchBtn" type="submit">Search</button>


            </form>
        </div>

        <div id="createEditDiv" class="item6">
            <p class="form-title"></p>Create / edit form
            <form id="createEditForm" method="post" action="post/">
                <p class="form-title">Form</p>
                <p>
                    <label>Something </label>
                    <input id="" type="text">
                </p>
                <p>
                    <label>Something</label>
                    <input id="" type="text">
                </p>
                <p>
                    <label>Something</label>
                    <input id="" type="text">
                </p>
                <p>
                    <select id="select">  </select>
                </p>

                <button id="submitBtn" type="submit">Submit</button>

            </form>
        </div>

        <!-- GRID -->
    </div>

</div>

我已经完成了类似的任务，这种方法效果很好。现在，问题是，一旦我加载页面，显示的唯一元素就是带有#logoutDivid 的元素，即使我将它隐藏在我的脚本中。以及其他默认不隐藏的元素，例如在页面加载时自动隐藏#loginDiv。#registerDiv

注意：当我加载页面并转到浏览器控制台时，它甚至说有隐藏元素。点击这里查看。我试图检查页面并在控制台中显示“ style=display:none”，以获得我实际上试图不隐藏的元素。

注意：我尝试.css从项目中删除我的文件以查看我的 css 是否存在这种情况，但即使没有任何 .css，结果也是一样的

有谁知道什么会导致这种情况？到目前为止，我只尝试为所有元素/div 赋予display:none样式，然后.show()在 jQuery 脚本中使用，但这并不能解决我的问题。

标签： htmljquerycss