如何简化这段javscript代码

Question

我确信这段 JS JavaScript 代码可以简化...我正在尝试减少代码行数，并相信这可以压缩并合并为更短的版本？它基本上是一个决策树，其中 yes |根据用户的说法，没有选择和结果出现 | yes |没有选择。

非常感谢，提前非常感谢。

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

<script>
    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');
    });
</script>

Answer 1

请从最近的静态容器中进行委派。您可以用面板替换按钮 - 我正在根据您显示的层次结构生成您的 HTML - 您可以忽略该代码

buttonContainer.addEventListener('click', (e) => {
  const buttonId = e.target.id;
  if (!buttonId.endsWith('Button')) return;

  const clickedName = buttonId.replace('Button', ''); // Derive the name from the button ID
  const panelToShow = `${clickedName}Panel`;

  // Get the panels to hide
  const panelsToHide = panelHierarchy
    .find(({ name }) => name === clickedName)
    .toggles.map(toggleName => `${toggleName}Panel`);

  // Hide the toggled panels
  panelsToHide.forEach(panel => {
    document.getElementById(panel).classList.add('hidden');
  });

  // Show the clicked panel
  document.getElementById(panelToShow).classList.remove('hidden');
});

.hidden {
  display: none;
}

.panel {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ccc;
}

<div id="buttonContainer"></div>
<div id="panelContainer"></div>
<script>

const panelHierarchy = [
  { name: 'yes', toggles: ['no', 'keep', 'sell', 'gainNo', 'gainYes', 'cgtNo', 'cgtYes'] },
  { name: 'no', toggles: ['yes', 'keep', 'sell', 'gainNo', 'gainYes', 'cgtNo', 'cgtYes'] },
  { name: 'keep', toggles: ['sell', 'gainNo', 'gainYes', 'cgtNo', 'cgtYes'] },
  { name: 'sell', toggles: ['keep', 'gainNo', 'gainYes', 'cgtNo', 'cgtYes'] },
  { name: 'gainNo', toggles: ['gainYes', 'cgtNo', 'cgtYes'] },
  { name: 'gainYes', toggles: ['gainNo', 'cgtNo', 'cgtYes'] },
  { name: 'cgtNo', toggles: ['cgtYes'] },
  { name: 'cgtYes', toggles: ['cgtNo'] }
];
  const buttonContainer = document.getElementById('buttonContainer');
  const panelContainer = document.getElementById('panelContainer');

  panelHierarchy.forEach(({ name }) => {
    // Create button
    const button = document.createElement('button');
    button.id = `${name}Button`;
    button.textContent = `${name.charAt(0).toUpperCase() + name.slice(1)} Button`;
    buttonContainer.appendChild(button);

    // Create panel
    const panel = document.createElement('div');
    panel.id = `${name}Panel`;
    panel.className = 'hidden panel';
    panel.textContent = `${name.charAt(0).toUpperCase() + name.slice(1)} Panel`;
    panelContainer.appendChild(panel);
  });
</script>

Answer 2

根据现有代码，我创建了这个简化的代码：

function showPanel(panelToShow) {
    // List all panel IDs in array formate
    const panels = ['noPanel', 'yesPanel', 'keepPanel', 'sellPanel', 'gainNoPanel', 'gainYesPanel', 'cgtNoPanel', 'cgtYesPanel'];
    
    // Hide all panels
    panels.forEach(panel => {
        document.getElementById(panel).classList.add('hidden');
    });

    // Show the specific panel
    document.getElementById(panelToShow).classList.remove('hidden');
}

// 每个按钮的事件监听器

document.getElementById('yesButton').addEventListener('click', () => showPanel('yesPanel'));
document.getElementById('noButton').addEventListener('click', () => showPanel('noPanel'));
document.getElementById('keepButton').addEventListener('click', () => showPanel('keepPanel'));
document.getElementById('sellButton').addEventListener('click', () => showPanel('sellPanel'));
document.getElementById('gainNoButton').addEventListener('click', () => showPanel('gainNoPanel'));
document.getElementById('gainYesButton').addEventListener('click', () => showPanel('gainYesPanel'));
document.getElementById('cgtNoButton').addEventListener('click', () => showPanel('cgtNoPanel'));
document.getElementById('cgtYesButton').addEventListener('click', () => showPanel('cgtYesPanel'));