根据用户角色隐藏导航栏

Posted 2023-02-03

嘿，我尝试根据用户角色制作三个不同的导航栏。我只希望根据其访客，用户或管理员显示导航栏之一。现在，我只想显示根据x = 1或不同的其他导航栏（se js代码）。

有人可以帮我吗？现在我已经累了。但这只是行不通的。我不太擅长编程，所以请不要使其变得复杂。

html file

<!--Navigationbar-->
<div class="NavigationBar" id="alle">
<ul>
    <!--Fælles navigationsbar-->
    <li><a href="Forside.html">Forside</a></li>
    <li><a href="BehandlingsTyper.html">Behandlingstyper</a></li>
    <li><a href="LogIn.html">Booking</a></li>
    <li><a href="omMig.html">Om mig</a></li>
    <li><a href="omMig.html">Kontakt</a></li>
</ul>
</div>

<div class="NavigationBar" id="user">
    <ul>
        <!--Bruger navigationbar-->
        <li><a href="Forside.html">Forside</a></li>
        <li><a href="BehandlingsTyper.html">Behandlingstyper</a></li>
        <li><a href="LogIn.html">Booking</a></li>
        <li><a href="omMig.html">Om mig</a></li>
        <li><a href="omMig.html">Kontakt</a></li>

        <li><a href="omMig.html">Se mine tider</a></li>
    </ul>
</div>

<div class="NavigationBar" id="admin">
    <ul>
        <!--Admin navigationbar-->
        <li><a href="Forside.html">Forside</a></li>
        <li><a href="BehandlingsTyper.html">Behandlingstyper</a></li>
        <li><a href="LogIn.html">Booking</a></li>
        <li><a href="omMig.html">Om mig</a></li>
        <li><a href="omMig.html">Kontakt</a></li>

        <li><a href="omMig.html">Tilføj tider</a></li>
        <li><a href="omMig.html">Se booket tider</a></li>
    </ul>
</div>

<script type="text/javascript" src="elementHider.js"></script>

Javascript file
x = 1

if (x==0) 
    (#alle).show;
 else 
    ("#all").hide;


if (x==0)
    ("#user").show;
 else 
    ("#user").hide;


if (x==101)
    ("#admin").show;
 else 
    ("#admin").hide;

答案

使用

document.querySelector('#all').style.display = 'none';

[没有像jQuery一样的内置方法.hide()或.show()。

另一答案

如果我理解您的正确，那么这就是您必须要做的：

x = 0;

//Check role, could also do this in switch statement. 
//But for now like this since it might be easyer to understand. 
//Probably if you copy paste this it wont work but I think this part is needed.
if (user == guest) 
   x = 0;
 else if (user == user) 
   x = 1;
 else if (user == admin) 
   x = 2;



//Guest
if (x==0) 
    (#alle).show;
 else 
    ("#alle").hide;


//user
if (x==1)
    ("#user").show;
 else 
    ("#user").hide;


//Admin
if (x==2)
    ("#admin").show;
 else 
    ("#admin").hide;