JavaScript新手求助：如何根据_userdata.session_logged_in值显示不同div？

步骤1：准备HTML结构 #

先在页面中定义两个分别对应登录和访客状态的Div，初始设置为隐藏：

<!-- 登录状态展示区 -->
<div id="loggedInPanel" style="display: none;">
  欢迎回来！您已登录
</div>

<!-- 访客状态展示区 -->
<div id="guestPanel" style="display: none;">
  您好，请登录后使用完整功能
</div>

步骤2：编写JavaScript逻辑 #

通过判断_userdata.session_logged_in的值，控制两个Div的显示与隐藏：

// 获取登录状态值
const loginStatus = _userdata.session_logged_in;

// 获取页面上的两个Div元素
const loggedInPanel = document.getElementById('loggedInPanel');
const guestPanel = document.getElementById('guestPanel');

// 严格判断状态值，控制显示
if (loginStatus === 1) {
  // 登录状态：显示登录面板，隐藏访客面板
  loggedInPanel.style.display = 'block';
  guestPanel.style.display = 'none';
} else if (loginStatus === 0) {
  // 访客状态：显示访客面板，隐藏登录面板
  loggedInPanel.style.display = 'none';
  guestPanel.style.display = 'block';
}

优化方案：用CSS类控制显示（更易维护） #

如果后续需要调整样式，推荐用CSS类管理显示状态，避免直接操作元素样式：

/* 定义显示/隐藏的通用类 */
.display-block {
  display: block;
}
.display-none {
  display: none;
}

对应的JavaScript代码调整为：

const loginStatus = _userdata.session_logged_in;
const loggedInPanel = document.getElementById('loggedInPanel');
const guestPanel = document.getElementById('guestPanel');

if (loginStatus === 1) {
  loggedInPanel.classList.add('display-block');
  loggedInPanel.classList.remove('display-none');
  guestPanel.classList.add('display-none');
  guestPanel.classList.remove('display-block');
} else if (loginStatus === 0) {
  loggedInPanel.classList.add('display-none');
  loggedInPanel.classList.remove('display-block');
  guestPanel.classList.add('display-block');
  guestPanel.classList.remove('display-none');
}

注意事项 #

• 尽量使用**严格相等运算符===**判断值，避免因类型转换导致的意外问题（比如0和'0'会被==判定为相等，但===不会）
• 确保_userdata变量在执行这段JS代码时已经被正确定义，否则会报错

内容的提问来源于stack exchange，提问作者xowjs