如何通过JavaScript根据if判断结果控制HTML按钮的显示与隐藏

你可以通过原生JavaScript控制元素的display属性实现需求，优先控制外层div的显隐即可同时控制两个按钮，代码更简洁：

步骤1：给外层div新增id（方便元素选择） #

<div id="control-btn-group" style="z-index: 999; position: fixed">
  <button id="speedbtn">Change speed</button>
  <button id="jmpbtn">Change jump power</button>
</div>

步骤2：编写显隐控制逻辑 #

// 你的业务变量，可根据实际场景修改赋值逻辑
let yourVariable = 0;

// 按钮显隐更新函数
function toggleButtons() {
  const btnWrap = document.getElementById('control-btn-group');
  // 变量等于5时显示，否则隐藏
  btnWrap.style.display = yourVariable === 5 ? 'block' : 'none';
}

// 页面初始化时执行一次，匹配初始变量值
toggleButtons();

// 后续每次修改yourVariable的值后，调用一次toggleButtons()即可生效，示例：
// yourVariable = 5;
// toggleButtons();

可选：单独控制两个按钮的实现 #

如果不需要同时控制两个按钮，或者后续可能要拆分显隐逻辑，也可以单独选择按钮控制：

function toggleButtons() {
  const speedBtn = document.getElementById('speedbtn');
  const jmpBtn = document.getElementById('jmpbtn');
  const showStatus = yourVariable === 5 ? 'inline-block' : 'none';
  speedBtn.style.display = showStatus;
  jmpBtn.style.display = showStatus;
}

框架场景适配 #

如果使用前端框架，直接绑定变量到显隐指令即可，不需要单独写调用函数：

• Vue：在外层div添加v-show="yourVariable === 5"
• React：在外层div的style属性添加display: yourVariable === 5 ? 'block' : 'none'

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