隐藏JQuery后未显示Div

Div not showing after being hidden JQuery

本文关键字：显示 Div JQuery 隐藏      更新时间：2023-09-26

在主体的onload中使div不可见之后，我似乎无法使其出现。这应该很容易解决，我就是好像搞不明白。

PHP

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php include '/include/init.php'; ?>
<script type="text/javascript" src="/js/jqeury.js"> </script>
<script type="text/javascript" src="/js/accounts.js"> </script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="/css/style.css" />
<title>Accounts</title>
</head>
<body onload="hide_buttons()">
    <div class="accounts_headerDiv">
        <div class="ahd_left">
            <img src="/images/launcher2.png" class="accounts_logo"/>
            <p class="title_para"> Accounts </p>
        </div>
        <div class="ahd_right">
            <div class="searchDiv">
                <p class="searchPara"> Search </p>
                <input type="text" id="search_input" placeholder="search" class="search_input"/>
                <img src="/images/search_icon.png" class="search_icon"/>
            </div>
            <div class="userDiv">  
                <a href="#"><img src="/images/default-portrait-icon.jpg" align="right" class="user_picture"  /> </a>            
                <p class="userInfo"><?php username($db);?></p>
                <a href="/functions/logout.php"> Log out </a>                                              
            </div>
            <div class="adminUserButtonsDiv" id="aubd">
                <input id="createUser" name="createUser" value="Create" type="button" class="admin_button">
                <br />
                <input id="editUser" name="editUser" value="Edit" type="button" class="admin_button">
            </div>
        </div>
    </div>    
    <hr />
<?php if (is_admin($db) === 'true') { ?>    
    <script type="text/javascript" src="/js/admin.js"> </script>
<?php } ?>
</body>
</html>

hide_buttons()函数在accounts.js中，此处为

function hide_buttons() {
    $('#aubd').hide();      
}

然后，当我调用admin.js时，我想让div重新出现，admin.js包含这个函数

$(document).ready(function() {
    $('#aubd').show();
});

这里的总体目标是检查用户是否具有"admin"角色，并根据此检查隐藏或显示其中包含的div和按钮。那么我做错了什么？这是正确的方式吗？还是应该使用AJAX？

onload事件在页面加载周期的后期发生。jQuery的ready回调发生得更早（正常情况下）。因此，现在发生的情况是，您的show呼叫发生在hide呼叫之前。

最好的解决方案是不使用onload。相反，只需输出隐藏的div：

<div id="aubd" style="display: none">....

或者在你的CSS中：

#aubd {
    display: none;
}

然后您的ready处理程序将显示它。

如果不能更改onload，则可以更改admin.js，使其稍后调用show：

$(window).load(function() {
    setTimeout(function() {
        $('#aubd').show();
    }, 0);
});

具有非常非常短超时值的setTimeout可以避免与load事件处理程序发生竞争。（jQuery通过addEventListener/attachEvent挂接处理程序。有些浏览器首先启动onload处理程序，然后启动addEventListener/attachEvent处理程序。其他浏览器则相反。）但是，最好通过首先以不同的方式隐藏div来完全避免这种情况。

您可以将show语句放在window.load中，而不是DOM ready中，以便在加载admin.js 后执行

$(window).load(function() {
    $('#aubd').show();
});

正如T.J.Crowder所指出的那样，使用setTimeout可以避免事件中的比赛条件。

$(window).load(function() {
    setTimeout(function() {
        $('#aubd').show();
    }, 1);
});

我的建议是将其隐藏在CSS中，这可能会解决您的问题。

使用#aubd {display:none;}，则元素在页面加载时已被隐藏，避免有时显示和隐藏闪烁。

这修复了它，我认为这是一种更好的编码方式。答案是"为什么"它不起作用，我想t.J.Crowder回答了。

相关文章：