0

このタグには「aside」タグがあり、サイドメニューのようなものを保持する「div」があります。ユーザーがログインしている場合にのみ、このメニューを表示したいと思います。そうでない場合は、メニューの代わりにログインフォームを表示したいと思います。PHPセッションが作成されたかどうかをJavaScriptで確認する方法は知っていますが、すべてのコードを他のコードの束に置き換える方法はわかりません。コードは次のとおりです。

<aside id="main_section_right">
    <div id="side_menu_div">
        <ul id="account_menu">
            <li class="current"><a href="#">Account</a></li>
            <li><a href="#">Edit Account</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Help</a></li>
            <li><a href="#">Log Out</a></li>
        </ul>
    </div>
</aside>

ユーザーがログインしていない場合、「ul」タグ内のコードをこれに変更したいと思います。

<form>
    <li><input type="text" class="form" id="username" name="usr"/></li>
    <li><input type="text" class="form" id="password" name="paw"/></li>
    <li>
        <button type="submit" class="login_button" id="login_button">
            <b>Login</b>
        </button>
    </li>
</form>

jQueryまたはJavaScriptでそれを行う方法はありますか? したがって、すべてをまとめると、次のようになります。

<script type="text/javascript">
    if (logged_in) {
        document.getElementById("side_menu_div").innerHTML = 
    } else {
        document.getElementById("side_menu_div").innerHTML =
    }
</script>

しかし、これはタグを置き換えるのではなく、テキストを変更している場合にのみ機能します。助けてくれてありがとう。

4

2 に答える 2

1

もう 1 つのアイデアは、2 つの要素を組み合わせて#side_menu_div、ログイン ステータスに応じて表示を切り替えることです。このjsfiddleを参照してください

<div id="side_menu_div">
  <div id="loggedin">
   <ul id="account_menu">
     <li class="current"><a href="#">Account</a></li>
     <li><a href="#">Edit Account</a></li>
     <li><a href="#">Contact</a></li>
     <li><a href="#">Help</a></li>
     <li><a href="#">Log Out</a></li>
   </ul>
  </div>
  <div id="notloggedid" class="chklogin">
   <form>
    <ul>
     <li><input type="text" class="form" id="username" name="usr"/></li>
     <li><input type="text" class="form" id="password" name="paw"/></li>
     <li><button type="submit" class="login_button" id="login_button">
                     <b>Login</b></button></li>
     </ul>  
   </form>
  </div>
</div>

表示を切り替える機能：

function _setMenu(loginstatus){
 if (loginstatus){
    $('#loggedin').show();
    $('#notloggedin').hide();
 } else {
    $('#loggedin').hide();
    $('#notloggedin').show();
 }
}
于 2012-09-08T12:08:21.640 に答える
0

また、たとえばmenu.htmlというファイルにメニューを、他のファイルform.htmlにフォームを含めることもできます。

var isLogged; // This variable shoud be a boolean indicating if the user is logged

if (isLogged) $("#main_section_right").load("menu.html");
else          $("#main_section_right").load("form.html");

ちなみに、aside要素全体の代わりにUL要素を使用して同じことを行うこともできますが、aside を変更する方が適切です。そうしないと、ID (*#side_menu_div* など) が適切なリファレンスにならないからです。

于 2012-09-15T15:32:26.017 に答える