如何简化这段基于Yes/No选择的JavaScript决策树交互代码？

我认为这段JavaScript代码可以简化，正尝试减少代码行数，相信它能被压缩合并为更简短的版本。这本质上是一个基于“是/否”选择的决策树，会根据用户选择展示对应结果。相关代码如下：

原始JavaScript代码 #

document.getElementById('yesButton').addEventListener('click', function() {
  document.getElementById('noPanel').classList.add('hidden');
  document.getElementById('yesPanel').classList.remove('hidden');
  document.getElementById('keepPanel').classList.add('hidden');
  document.getElementById('sellPanel').classList.add('hidden');
  document.getElementById('gainNoPanel').classList.add('hidden');
  document.getElementById('gainYesPanel').classList.add('hidden');
  document.getElementById('cgtNoPanel').classList.add('hidden');
  document.getElementById('cgtYesPanel').classList.add('hidden');
});

document.getElementById('noButton').addEventListener('click', function() {
  document.getElementById('yesPanel').classList.add('hidden');
  document.getElementById('noPanel').classList.remove('hidden');
  document.getElementById('keepPanel').classList.add('hidden');
  document.getElementById('sellPanel').classList.add('hidden');
  document.getElementById('gainNoPanel').classList.add('hidden');
  document.getElementById('gainYesPanel').classList.add('hidden');
  document.getElementById('cgtNoPanel').classList.add('hidden');
  document.getElementById('cgtYesPanel').classList.add('hidden');
});

document.getElementById('keepButton').addEventListener('click', function() {
  document.getElementById('keepPanel').classList.remove('hidden');
  document.getElementById('sellPanel').classList.add('hidden');
  document.getElementById('gainNoPanel').classList.add('hidden');
  document.getElementById('gainYesPanel').classList.add('hidden');
  document.getElementById('cgtNoPanel').classList.add('hidden');
  document.getElementById('cgtYesPanel').classList.add('hidden');
});

document.getElementById('sellButton').addEventListener('click', function() {
  document.getElementById('sellPanel').classList.remove('hidden');
  document.getElementById('keepPanel').classList.add('hidden');
  document.getElementById('gainNoPanel').classList.add('hidden');
  document.getElementById('gainYesPanel').classList.add('hidden');
  document.getElementById('cgtNoPanel').classList.add('hidden');
  document.getElementById('cgtYesPanel').classList.add('hidden');
});

document.getElementById('gainNoButton').addEventListener('click', function() {
  document.getElementById('gainNoPanel').classList.remove('hidden');
  document.getElementById('gainYesPanel').classList.add('hidden');
  document.getElementById('cgtNoPanel').classList.add('hidden');
  document.getElementById('cgtYesPanel').classList.add('hidden');
});

document.getElementById('gainYesButton').addEventListener('click', function() {
  document.getElementById('gainYesPanel').classList.remove('hidden');
  document.getElementById('gainNoPanel').classList.add('hidden');
  document.getElementById('cgtNoPanel').classList.add('hidden');
  document.getElementById('cgtYesPanel').classList.add('hidden');
});

document.getElementById('cgtNoButton').addEventListener('click', function() {
  document.getElementById('cgtNoPanel').classList.remove('hidden');
  document.getElementById('cgtYesPanel').classList.add('hidden');
});

document.getElementById('cgtYesButton').addEventListener('click', function() {
  document.getElementById('cgtYesPanel').classList.remove('hidden');
  document.getElementById('cgtNoPanel').classList.add('hidden');
});

原始CSS代码 #

.hidden {
  display: none;
}

原始HTML代码 #

<div class="container mt-5">
  <h1>Do you know the value of your product?</h1>
  <div class="mt-3">
    <button id="yesButton" class="btn btn-primary">Yes</button>
    <button id="noButton" class="btn btn-secondary">No</button>
  </div>
  <div id="noPanel" class="mt-3 hidden">
    <div class="alert alert-info">Check the information</div>
  </div>
  <div id="yesPanel" class="mt-3 hidden">
    <button id="sellButton" class="btn btn-danger">I want to sell my product</button>
    <button id="keepButton" class="btn btn-success">I want to keep my product</button>
  </div>
  <div id="keepPanel" class="mt-3 hidden">
    <div class="alert alert-info">Choices 1 or 2 are best</div>
  </div>
  <div id="sellPanel" class="mt-3 hidden">
    <div class="alert alert-warning">Is your gain more than £3000?</div>
    <button id="gainYesButton" class="btn btn-primary">Yes</button>
    <button id="gainNoButton" class="btn btn-secondary">No</button>
  </div>
  <div id="gainNoPanel" class="mt-3 hidden">
    <div class="alert alert-info">Option 3 is best</div>
  </div>
  <div id="gainYesPanel" class="mt-3 hidden">
    <div class="alert alert-danger">This means you'll pay CGT. Do you still want to sell?</div>
    <button id="cgtYesButton" class="btn btn-primary">Yes</button>
    <button id="cgtNoButton" class="btn btn-secondary">No</button>
  </div>
  <div id="cgtNoPanel" class="mt-3 hidden">
    <div class="alert alert-info">Choices 1 or 2 are best</div>
  </div>
  <div id="cgtYesPanel" class="mt-3 hidden">
    <div class="alert alert-info">Choice 3 is best</div>
  </div>
</div>

简化后的JavaScript代码 #

// 按钮与对应展示面板的映射关系
const buttonPanelMap = {
  yesButton: 'yesPanel',
  noButton: 'noPanel',
  keepButton: 'keepPanel',
  sellButton: 'sellPanel',
  gainNoButton: 'gainNoPanel',
  gainYesButton: 'gainYesPanel',
  cgtNoButton: 'cgtNoPanel',
  cgtYesButton: 'cgtYesPanel'
};

// 获取所有面板元素
const allPanels = Object.values(buttonPanelMap).map(id => document.getElementById(id));

// 批量绑定点击事件
Object.entries(buttonPanelMap).forEach(([buttonId, targetPanelId]) => {
  document.getElementById(buttonId).addEventListener('click', () => {
    // 隐藏所有面板
    allPanels.forEach(panel => panel.classList.add('hidden'));
    // 显示目标面板
    document.getElementById(targetPanelId).classList.remove('hidden');
  });
});

简化说明 #

1. 统一映射管理：用对象存储按钮和对应面板的关联关系，后续新增按钮/面板只需更新这个对象，无需修改事件逻辑
2. 批量元素操作：一次性获取所有面板，避免重复调用getElementById
3. 复用事件逻辑：通过遍历映射对象，给所有按钮绑定相同的点击逻辑——先隐藏所有面板，再显示目标面板，彻底消除重复代码
4. 代码更易维护：逻辑集中，后续修改展示规则时只需调整核心逻辑，不用逐个修改每个按钮的事件函数

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