Início / coding / Perguntas / 79192109
Accepted
riospereira
Asked: 2024-11-15 19:08:44 +0800 CST

Como posso simplificar este pedaço de código javscript

  • 772

Tenho certeza de que esse pedaço de código JavaScript pode ser simplificado... Estou tentando reduzir a quantidade de linhas de código e acredito que isso pode ser condensado e mesclado em uma versão mais curta? É basicamente uma árvore de decisão com escolhas sim | não e os resultados aparecem de acordo com a seleção sim | não do usuário.

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');
});
.hidden {
  display: none;
}
<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

2 respostas

  1. Por favor, delegue do contêiner estático mais próximo. Você pode substituir Botão por Painel -

    const panelHierarchy = [
    { prefix: 'yes', toggles: ['no', 'keep', 'sell', 'gainNo', 'gainYes', 'cgtNo', 'cgtYes'] },
    { prefix: 'no', toggles: ['yes', 'keep', 'sell', 'gainNo', 'gainYes', 'cgtNo', 'cgtYes'] },
    { prefix: 'keep', toggles: ['sell', 'gainNo', 'gainYes', 'cgtNo', 'cgtYes'] },
    { prefix: 'sell', toggles: ['keep', 'gainNo', 'gainYes', 'cgtNo', 'cgtYes'] },
    { prefix: 'gainNo', toggles: ['gainYes', 'cgtNo', 'cgtYes'] },
    { prefix: 'gainYes', toggles: ['gainNo', 'cgtNo', 'cgtYes'] },
    { prefix: 'cgtNo', toggles: ['cgtYes'] },
    { prefix: 'cgtYes', toggles: ['cgtNo'] }
];

const container = document.querySelector('.container');

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

  const clickedPrefix = buttonId.replace('Button', ''); // get the panel ID from the button ID
  const panelToShow = `${clickedPrefix}Panel`;

  // Get the panels to hide
  const panelsToHide = panelHierarchy
    .find(({ prefix }) => prefix === clickedPrefix)
    .toggles.map(toggleItem => `${toggleItem}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;
}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />

<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>

    • 1
  2. Best Answer

    Como a configuração da visibilidade dos painéis diz respeito exatamente aos painéis que seguem abaixo do painel que tem o botão clicado, e há exatamente um desses painéis que deve estar visível, que idpode ser derivado do do botão clicado, você pode generalizar esse processo sem muitas referências idcodificadas .id

    Você pode anexar apenas um manipulador de clique — no elemento contêiner — derivar qual é o painel que tem o botão clicado e, então, iterar os painéis restantes para definir sua visibilidade adequadamente:

    const container = document.querySelector("div.container");
const panels = [...container.children];

container.addEventListener("click", function (e) {
    if (e.target.tagName !== "BUTTON") return;
    const choice = document.getElementById(e.target.id.replace("Button", "Panel"));
    for (const panel of panels.slice(panels.indexOf(e.target.parentNode) + 1)) {
        panel.classList.toggle("hidden", panel !== choice);
    }
});
    .hidden { display: none }
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<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>

    • 1

relate perguntas