选择特定玩家变量时如何实现对应DIV元素的显示控制

现有问题 #

1. JS中player被定义为数组['1', '2']，直接和字符串'1'做等值判断永远返回false，逻辑无法正常触发
2. 未正确获取session中存储的当前玩家ID，前端不知道当前用户是玩家1还是玩家2
3. 缺少实际控制div显示/隐藏的DOM操作代码

解决方案 #

提供两种可直接落地的实现方式：

方案1：直接在game.php中读取session输出到JS（最简单，无需额外请求） #

首先在game.php顶部先开启session读取玩家ID：

<?php
session_start();
// 读取当前玩家ID，不存在则赋值为空字符串
$currentPlayerId = $_SESSION['playerId'] ?? '';
?>

然后在页面的JS部分写如下逻辑，注意要放在DOM元素加载完成后执行：

document.addEventListener('DOMContentLoaded', function() {
  // 从PHP拿到当前玩家ID
  const currentPlayer = '<?php echo $currentPlayerId; ?>';
  // 获取两个div的DOM对象
  const divA = document.querySelector('.divA');
  const divB = document.querySelector('.divB');

  // 执行显示逻辑
  if (currentPlayer === '1') {
    divA.style.display = 'block';
    divB.style.display = 'none';
  } else if (currentPlayer === '2') {
    divA.style.display = 'none';
    divB.style.display = 'block';
  }
})

方案2：通过AJAX请求你写的index.php接口获取玩家信息 #

如果不想在PHP中直接输出变量到JS，可以用这种方式，JS代码如下：

document.addEventListener('DOMContentLoaded', function() {
  // 请求index.php拿玩家信息
  fetch('index.php')
    .then(response => response.json())
    .then(result => {
      if (!result.success) {
        console.log('获取玩家信息失败', result.error);
        // 这里可以加未登录的跳转逻辑
        return;
      }
      const currentPlayer = result.data.playerId;
      const divA = document.querySelector('.divA');
      const divB = document.querySelector('.divB');

      if (currentPlayer === '1') {
        divA.style.display = 'block';
        divB.style.display = 'none';
      } else if (currentPlayer === '2') {
        divA.style.display = 'none';
        divB.style.display = 'block';
      }
    })
    .catch(err => console.log('请求出错', err))
})

注意事项 #

• 你现有HTML中divA和divB用的是class属性，所以DOM选择器要用.divA/.divB，如果后续改成id属性才需要用#divA/#divB
• 所有JS逻辑必须等DOM加载完成后执行，所以要么把代码放在页面底部</body>标签之前，要么包在上面写的DOMContentLoaded事件回调里

内容的提问来源于stack exchange，提问作者RUG-question123