隐藏特定用户角色的特定 Div 类

Question

我正在寻找一个可以对所有“雇主”用户隐藏 div 类 #header_aside 的函数。有人能帮我吗？我在网上尝试了一些不同的功能，但它们都不起作用。任何帮助表示赞赏。

谢谢！

Answer 1

试试这个...

function hideHeaderAsideForEmployers() {
  const userRole = localStorage.getItem('user_role'); // Try localStorage first
  if (!userRole) {
    // If not found in localStorage, try data attribute on the body tag (assuming it's set)
    userRole = document.body.dataset.userRole;
  }
  if (userRole === 'Employer') {
    const headerAside = document.getElementById('header_aside');
    if (headerAside) {
      headerAside.style.display = 'none';
    }
  }
}

// Call the function on page load
window.addEventListener('load', hideHeaderAsideForEmployers);

hideHeaderAsideForEmployers

功能：

此函数检查当前用户是否具有“雇主”角色。

它首先尝试从

localStorag

e 检索用户角色。这是浏览器中常见的存储机制，用于跨页面加载存储数据。

如果在

localStorage

中找不到该角色，它会尝试从 body 标签上设置的

data-user-role

属性中获取该角色（假设您的主题为登录用户设置了此属性）。

有条件隐藏：

如果确认用户角色为“雇主”，则该函数将使用

header_aside

定位 ID 为

document.getElementById

的元素。 如果找到该元素，其显示样式将设置为

none

，从而有效地将其从视图中隐藏。

函数调用：

当页面使用

hideHeaderAsideForEmployers

完成加载时，将调用

window.addEventListener('load', ... )

函数。这可确保 DOM 在尝试访问元素之前已完全加载。