4

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 を再表示させたい

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

ここでの全体的な目標は、ユーザーが「管理者」の役割を持っているかどうかを確認し、この確認に基づいて含まれる div とボタンを表示または非表示にすることです。それで、私は何を間違っていますか？また、これは正しい方法AJAXですか、これを使用する必要がありますか?

4

3 に答える 3

7

このonloadイベントは、ページのロード サイクルの非常に遅い段階で発生します。jQuery のreadyコールバックは (通常) ずっと早く発生します。つまり、あなたのshow呼び出しがあなたの呼び出しの前に起こっているということhideです。

最善の解決策は、使用しないことonloadです。代わりに、非表示の div を出力するだけです。

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

またはあなたのCSSで：

#aubd {
    display: none;
}

次に、readyハンドラーはそれを問題なく表示します。

を変更できない場合は、後で呼び出すようにonload変更できます。admin.jsshow

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

イベント ハンドラとのsetTimeout競合状態を回避するために、非常に短いタイムアウト値が設定されています。load(jQuery はaddEventListener/を介してハンドラーをフックしattachEventます。一部のブラウザーは、onload最初にハンドラーを起動し、次にaddEventListener/attachEventハンドラーを起動します。他のブラウザーは、逆の方法で起動します。) しかし、繰り返しになりますが、最初から div を別の方法で非表示にすることにより、これを完全に回避するのが最善です。

于 2013-07-20T16:32:17.053 に答える
2

admin.js がロードされた後に実行されるように、DOM Ready の代わりに window.load に show ステートメントを入れることができます。

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

TJ Crowderが指摘したように、イベントには setTimeout を使用して回避できる競合状態があります。

$(window).load(function() {
    setTimeout(function() {
        $('#aubd').show();
    }, 1);
});
于 2013-07-20T16:33:17.677 に答える
1

あなたの問題を解決するかもしれない私の提案は、それをCSSに隠すことです.

を使用#aubd {display:none;}すると、ページがロードされたときに要素がすでに非表示になり、時々表示されて非表示になることを回避できます。

これはそれを修正し、コーディングするより良い方法だと思います。うまくいかない「なぜ」の答えTJ Crowderさんが答えてくれたと思います。

于 2013-07-20T16:37:33.517 に答える