色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

向彈出模式改變div結構添加功能

CSS
林雅南2年前11瀏覽0評論

在此輸入圖像描述

我是JavaScript新手，我想知道如何添加一個改變div格式的函數。 默認的陣型是3-4-3 (divs陣型),希望在彈出菜單中增加點擊時改變陣型的功能。 ............................................................................................................................................................................................................................................................................................................................................................................................................................................ 代碼如下:

<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">
            Caja3
           </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="submit">Formación </button>
    <dialog data-modal>
        <form method="dialog">
            
            <button type="submit">3-4-3</button>
        
            <button type="submit">3-5-2</button>
        
            <button type="submit">4-4-3</button>
        
            <button type="submit">5-3-2</button>
        
            <button type="submit">3-6-1</button>
            
        
    </form>
    </dialog>
</div>

<script>
    const openButton = document.querySelector("[data-open-modal]")
    const closeButton = document.querySelector("[data-close-modal]")
    const modal = document.querySelector("[data-modal]")

    openButton.addEventListener("click", () => {
        modal.showModal()
    })
    closeButton.addEventListener("click", () => {
        modal.close()
    })
</script>

第一種解決方案是針對非動態內容，第二種是針對動態內容。

非動態方式-使用CSS偽元素

你有4個集裝箱。 選擇一個選項后，從容器中移除所有子元素。 根據您的選擇，您運行循環并用正確數量的具有相同HTML(非動態)的框填充每個容器。 最后，CSS通過抓住每個元素的順序和應用不同的內容來做一些動態的工作。例如編號(1，2，3...,6).

const layouts = [
  [3, 4, 3, 1],
  [3, 5, 2, 1],
  [4, 4, 3, 0],
  [5, 3, 2, 1],
  [3, 6, 1, 1],
];

document.addEventListener('DOMContentLoaded', () => {
  const buttons = document.querySelectorAll('#controls button');
  buttons.forEach((btn, i) => {
    btn.addEventListener('click', () => {
      setLayout(i);
    });
  });
  // Simulate clicking for first option.
  buttons[0].click()
})

// Function that triggers each layout
const setLayout = (num) => {
  const wrapper = document.querySelector('.line-up');
  const containers = document.querySelectorAll('.flex-container');

  // Remove all boxes first!
  containers.forEach(container => {
    while (container.firstChild) {
      container.removeChild(container.firstChild);
    }
  });

  switch (num) {
    case 0:
      // Layout 1
      for (let i = 0; i < layouts[0][0]; i++) {
        containers[0].insertAdjacentHTML('afterbegin', '<div class="caja">Caja</div>');
      }
      for (let i = 0; i < layouts[0][1]; i++) {
        containers[1].insertAdjacentHTML('afterbegin', '<div class="caja">Caja</div>');
      }
      for (let i = 0; i < layouts[0][2]; i++) {
        containers[2].insertAdjacentHTML('afterbegin', '<div class="caja">Caja</div>');
      }
      for (let i = 0; i < layouts[0][3]; i++) {
        containers[3].insertAdjacentHTML('afterbegin', '<div class="caja">Caja</div>');
      }
      break;
    case 1:
      // Layout 2
      for (let i = 0; i < layouts[1][0]; i++) {
        containers[0].insertAdjacentHTML('afterbegin', '<div class="caja">Caja</div>');
      }
      for (let i = 0; i < layouts[1][1]; i++) {
        containers[1].insertAdjacentHTML('afterbegin', '<div class="caja">Caja</div>');
      }
      for (let i = 0; i < layouts[1][2]; i++) {
        containers[2].insertAdjacentHTML('afterbegin', '<div class="caja">Caja</div>');
      }
      for (let i = 0; i < layouts[1][3]; i++) {
        containers[3].insertAdjacentHTML('afterbegin', '<div class="caja">Caja</div>');
      }
      break;
    case 2:
      // Layout 3
      for (let i = 0; i < layouts[2][0]; i++) {
        containers[0].insertAdjacentHTML('afterbegin', '<div class="caja">Caja</div>');
      }
      for (let i = 0; i < layouts[2][1]; i++) {
        containers[1].insertAdjacentHTML('afterbegin', '<div class="caja">Caja</div>');
      }
      for (let i = 0; i < layouts[2][2]; i++) {
        containers[2].insertAdjacentHTML('afterbegin', '<div class="caja">Caja</div>');
      }
      for (let i = 0; i < layouts[2][3]; i++) {
        containers[3].insertAdjacentHTML('afterbegin', '<div class="caja">Caja</div>');
      }
      break;
    case 3:
      // Layout 4
      for (let i = 0; i < layouts[3][0]; i++) {
        containers[0].insertAdjacentHTML('afterbegin', '<div class="caja">Caja</div>');
      }
      for (let i = 0; i < layouts[3][1]; i++) {
        containers[1].insertAdjacentHTML('afterbegin', '<div class="caja">Caja</div>');
      }
      for (let i = 0; i < layouts[3][2]; i++) {
        containers[2].insertAdjacentHTML('afterbegin', '<div class="caja">Caja</div>');
      }
      for (let i = 0; i < layouts[3][3]; i++) {
        containers[3].insertAdjacentHTML('afterbegin', '<div class="caja">Caja</div>');
      }
      break;
    case 4:
      // Layout 5
      for (let i = 0; i < layouts[4][0]; i++) {
        containers[0].insertAdjacentHTML('afterbegin', '<div class="caja">Caja</div>');
      }
      for (let i = 0; i < layouts[4][1]; i++) {
        containers[1].insertAdjacentHTML('afterbegin', '<div class="caja">Caja</div>');
      }
      for (let i = 0; i < layouts[4][2]; i++) {
        containers[2].insertAdjacentHTML('afterbegin', '<div class="caja">Caja</div>');
      }
      for (let i = 0; i < layouts[4][3]; i++) {
        containers[3].insertAdjacentHTML('afterbegin', '<div class="caja">Caja</div>');
      }
      break;
  }
}

html,
body {
  margin: 0;
  padding: 0;
}

.line-up {
  background: linear-gradient(30deg, #fafafa, #fff);
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  min-height: 100vh;
  box-sizing: border-box;
}

.caja {
  width: 80px;
  height: 80px;
  background: #fafafa;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  box-shadow: 0 4px 12px #0002;
}

.flex-container {
  display: flex;
  flex-flow: row nowrap;
  gap: 10px;
}

#controls {
  position: fixed;
  left: 20px;
  top: 20px;
  display: flex;
  flex-flow: column wrap;
  gap: 5px;
  background: #fff;
  padding: 5px;
  border-radius: 4px;
  box-shadow: 0 4px 12px #0002;
}

#controls button {
  width: 60px;
  height: 30px;
  background: #ccc5;
  border: unset;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.flex-container .caja:nth-child(1)::after {
  content: '1';
}

.flex-container .caja:nth-child(2)::after {
  content: '2';
}

.flex-container .caja:nth-child(3)::after {
  content: '3';
}

.flex-container .caja:nth-child(4)::after {
  content: '4';
}

.flex-container .caja:nth-child(5)::after {
  content: '5';
}

.flex-container .caja:nth-child(6)::after {
  content: '6';
}

<section class="line-up">
  <div class="flex-container"></div>
  <div class="flex-container"></div>
  <div class="flex-container"></div>
  <div class="flex-container"></div>
</section>
<div id="controls">
  <button>3-4-3-1</button>
  <button>3-5-2-1</button>
  <button>4-4-3</button>
  <button>5-3-2-1</button>
  <button>3-6-1-1</button>
</div>