Fatal编程技术网
  • javascript/
  • Javascript 隐藏JQuery后未显示Div

Javascript 隐藏JQuery后未显示Div

javascript jquery html

Javascript 隐藏JQuery后未显示Div,javascript,jquery,html,Javascript,Jquery,Html,在主体中使div在onload中不可见之后，我似乎无法使其出现。这应该很容易解决，我就是想不出来 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> <?p

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

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>
然后我想在调用包含此函数的admin.js时使div重新出现

$(document).ready(function() {
    $('#aubd').show();
});
这里的总体目标是检查用户是否具有“admin”角色，并根据此检查隐藏或显示其中包含的div和按钮。那么我做错了什么？这也是正确的方法吗？还是我应该使用
AJAX
来实现这一点？

在页面加载周期中，
onload
事件发生得很晚。jQuery的
ready
回调发生得更早（通常）。所以现在发生的是，您的
show
调用发生在您的
hide
调用之前

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

<div id="aubd" style="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();
});
正如所指出的，使用setTimeout可以避免事件中存在争用条件

$(window).load(function() {
    setTimeout(function() {
        $('#aubd').show();
    }, 1);
});
我的建议是，将它隐藏在CSS中，这可能会解决您的问题

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

这修复了它，我认为这是一种更好的编码方式。“为什么”这个答案不起作用，我想已经回答了。

你能确认hide_buttons（）确实被调用了吗？顺便说一句，为什么不从一开始就在CSS中隐藏div呢？@josh是的，它的作用我同意@sergio大多数人在页面加载时都会使用style=“display:none；”。否则，您将看到元素快速闪烁，然后隐藏。加载脚本呈现DOM，然后执行JavaScript隐藏元素。感谢大家的帮助，为什么不（function（）{$（'aubd'）.show（）；}）或direct$（'aubd'）.show（）@Ankit：在解析页面的过程中，当到达
admin.js
脚本时，它会立即被调用，甚至早于jQuery
ready
回调，因此它会遇到与jQuery
ready
回调相同的问题。谢谢先生。我会尽快接受。你认为这是正确的方法吗？我对JQuery相当陌生。所以我想早点养成好习惯。或者我应该使用css隐藏这个，然后只进行一次JQuery调用吗？@I_me_mine：“或者我应该使用css隐藏这个，然后只进行一次JQuery调用吗？”这就是我要做的，是的。函数在onload上运行而不是在解析过程中，如果我做了什么错误，请告诉我问题是您有竞争条件。浏览器是先启动
onload
，还是先启动通过
addEventListener
/
attachEvent
（jQuery使用的）钩住的处理程序？答案是：这取决于浏览器。所以我不建议忽略比赛条件。谢谢@T.J.Crowder指出这种情况，你的答案中设置超时是为了避免这种情况吗？@adil:是的，没错，尽管我的主要答案是“不要使用
onload
在第一个位置隐藏div”。-）（改用内联样式或CSS。）然后
ready
处理程序就可以正常工作了。 
$(window).load(function() {
    $('#aubd').show();
});

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