JavaScript新手求助：为弹出模态框添加Div阵型切换功能

核心思路 #

给模态框内的阵型按钮绑定数据属性，监听表单提交事件获取选中的阵型参数，再根据参数动态更新前锋、中场、防守区域的Div数量。

修改后的完整代码 #

<section class="line-up">
  <div class="flex-container" id="delantera">
    <div class="caja">Caja1</div>
    <div class="caja">Caja2</div>
    <div class="caja">Caja3</div>
  </div>

  <div class="flex-container" id="mediocentro">
    <div class="caja">Caja1</div>
    <div class="caja">Caja2</div>
    <div class="caja">Caja3</div>
    <div class="caja">Caja4</div>
  </div>

  <div class="flex-container" id="defensa">
    <div class="caja">Caja1</div>
    <div class="caja">Caja2</div>
    <div class="caja">Caja3</div>
  </div>  

  <div class="flex-container" id="porteria">
    <div class="caja">Caja1</div>
  </div>
</section>

<div class="alineacion">
  <button data-open-modal id="cambiar-once" class="btn btn-outline-success my-5 my-sm-0" type="button">Formación</button>
  <dialog data-modal>
    <form method="dialog">
      <button type="submit" data-formation="3-4-3">3-4-3</button>
      <button type="submit" data-formation="3-5-2">3-5-2</button>
      <button type="submit" data-formation="4-4-2">4-4-2</button>
      <button type="submit" data-formation="5-3-2">5-3-2</button>
      <button type="submit" data-formation="3-6-1">3-6-1</button>
    </form>
  </dialog>
</div>

<style>
  .line-up {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
  }
  .flex-container {
    display: flex;
    justify-content: center;
    gap: 15px;
  }
  .caja {
    width: 80px;
    height: 80px;
    border: 1px solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f0f0f0;
  }
  dialog form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
  }
</style>

<script>
  const openButton = document.querySelector("[data-open-modal]");
  const modal = document.querySelector("[data-modal]");
  const formationForm = modal.querySelector("form");

  openButton.addEventListener("click", () => {
    modal.showModal();
  });

  formationForm.addEventListener("submit", (e) => {
    const selectedBtn = e.submitter;
    if (!selectedBtn.dataset.formation) return;

    const [defenseCount, midCount, forwardCount] = selectedBtn.dataset.formation.split("-").map(Number);
    
    updateContainer("defensa", defenseCount);
    updateContainer("mediocentro", midCount);
    updateContainer("delantera", forwardCount);
  });

  function updateContainer(containerId, count) {
    const container = document.getElementById(containerId);
    container.innerHTML = "";
    for (let i = 1; i <= count; i++) {
      const caja = document.createElement("div");
      caja.className = "caja";
      caja.textContent = `Caja${i}`;
      container.appendChild(caja);
    }
  }
</script>

关键说明 #

1. 数据属性绑定：给每个阵型按钮加data-formation属性，直接存储阵型的数字组合，避免硬编码逻辑。
2. 表单事件监听：通过表单submit事件统一处理阵型选择，不用给每个按钮单独绑定点击事件。
3. 动态更新逻辑：封装updateContainer函数，负责清空目标容器并创建对应数量的caja元素，简化重复操作。
4. 基础样式优化：添加CSS让阵型布局更直观，可根据需求调整样式细节。

内容的提问来源于stack exchange，提问作者Marc Serrés