我正在尝试制作一个下拉菜单,该菜单根据用户类型(admin = 1,poweruser = 2,read_only = 3)显示某些元素。
我正在做的是,首先,用 PHP 显示菜单(将其作为一个模块并能够在多个页面上使用它)。
PHP代码:
public function printNavBar(){
echo "
<div class='navbar'>
<div class='dropdown'>
<button class='dropbtn'><img src='../resources/icons/menu.png' alt='Menu Icon' class='dropdownMenuIcon'></button>
<div class='dropdown-content'>
<a href='userpanel.php?action=addResume' id='dropDownCreateResume'>
<img src='../resources/icons/resume.png' alt='Menu Icon' class='dropdownMenuIcon imgDropdown'>
<span class='dropdownText'>New CV</span>
</a>
<a href='userpanel.php?action=createUser' id='dropDownCreateUser'>
<img src='../resources/icons/add-new-user.png' alt='Menu Icon' class='dropdownMenuIcon imgDropdown'>
<span class='dropdownText'>New user</span>
</a>
<a href='userpanel.php?action=editUser' id='dropDownEditUser'>
<img src='../resources/icons/edit-user.png' alt='Menu Icon' class='dropdownMenuIcon imgDropdown'>
<span class='dropdownText'>Edit user</span>
</a>
<a href='userpanel.php?action=changePassword' id='dropDownChangePassword'>
<img src='../resources/icons/change-password.png' alt='Menu Icon' class='dropdownMenuIcon imgDropdown'>
<span class='dropdownText'>Change Password</span>
</a>
<a href='userpanel.php?action=showLog' id='dropDownShowLog'>
<img src='../resources/icons/log-file.png' alt='Menu Icon' class='dropdownMenuIcon imgDropdown'>
<span class='dropdownText'>Log</span>
</a>
</div>
</div>
<a class='navBarElement' href='../index.php?logOut=true'>
<img class='logoutMenuIcon' src='../resources/icons/logout.png' alt='Logout icon'>
</a>
<a class='navBarElement' href='../index.php'>
<img class='homeIcon' src='../resources/icons/home.png' alt='Home icon'>
</a>
</div>''";
}
完成后,我调用应该添加类的 javascript 函数,以便不会根据用户显示元素:
function showElements(idUser) {
// User type
const ADMIN_USER = 1;
const POWER_USER = 2;
const READ_ONLY_USER = 3;
// Switch user type, we add css to elements or not
switch (idUser) {
case POWER_USER:
document.getElementById('dropDownCreateUser').setAttribute('class', 'hiddenDropdownElement');
document.getElementById('dropDownEditUser').setAttribute('class', 'hiddenDropdownElement');
document.getElementById('dropDownShowLog').setAttribute('class', 'hiddenDropdownElement');
break;
case READ_ONLY_USER:
document.getElementById('dropDownCreateUser').setAttribute('class', 'hiddenDropdownElement');
document.getElementById('dropDownEditUser').setAttribute('class', 'hiddenDropdownElement');
document.getElementById('dropDownShowLog').setAttribute('class', 'hiddenDropdownElement');
document.getElementById('dropDownCreateResume').setAttribute('class', 'hiddenDropdownElement');
break;
}
}
这些函数在主页上调用。
主页:
<?php
session_start();
// Required files
require_once '../php/logOut.php';
require_once '../php/redirections.php';
require_once '../php/printDataProcess.php';
// Checking the session
if(!isset($_SESSION['userSession'])){
header("Location: ../index.php");
}
// Checking the session
if (!isset($_SESSION['created'])) {
$_SESSION['created'] = time();
} else if (time() - $_SESSION['created'] > 3600) {
// session started more than 1 hour ago
session_regenerate_id(true); // change session ID for the current session and invalidate old session ID
$_SESSION['created'] = time(); // update creation time
logOut();
}
if (isset($_GET['logOut'])) {
logOut();
}
?>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<!-- CSS imports -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../css/main.css" />
<!-- JQuery include -->
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="../js/hiddenNavBarData.js"></script>
<meta charset="utf-8">
<title>User panel</title>
</head>
<body>
<!-- Navigation Bar content -->
<?php
$userListHandler = PrintDataHandler::getInstance();
$userListHandler->printNavBar();
?>
<!-- Body content -->
<div class="bodyContainer">
<?php
echo "<div id='userGreet'>
<h3>Welcome, ".$_SESSION['userSession']['name']." ".$_SESSION['userSession']['surname']."</h3>
</div>";
?>
</div>
<?php
$userListHandler->printFooter();
?>
<script type="text/javascript">
var userLevel = <?php echo $_SESSION["userSession"]["level"]; ?>;
showElements(userLevel);
</script>
</body>
</html>
我的问题是它没有将 css 类添加到元素中。
我一直在浏览器中测试控制台,以防出现问题,但似乎没有。此外,在使用调试器时,它不会添加类。
我该如何解决?
谢谢。
使用 javascript 向元素添加类是这样的,您必须分配一个空格加上要添加的类的名称
或者如果你想让它更短,它会是这样的。
如何更改班级的示例