Saya mendapat beberapa fungsi di mana lebar div akan diubah jika seseorang mengklik tombol yang sesuai.

Saya punya beberapa div untuk membutuhkan fungsi yang sama, jadi saya menggunakan querySelectorAll untuk mendapatkan semua elemen dengan kelas. Namun, masalahnya adalah bahwa semua lebar div akan diubah pada saat yang sama ketika tombol diklik.

Bagaimana cara memisahkan mereka seperti jika saya mengklik tombol bagian pertama, hanya div dari bagian pertama yang akan terpengaruh; Jika saya mengklik tombol bagian kedua, hanya div dari bagian kedua yang akan terpengaruh.

Bahkan saya dapat menduplikasi JavaScript kemudian ganti nama fungsi untuk bagian yang berbeda untuk mencapai hasil ini, tetapi tidak masuk akal. Seolah-olah saya mendapat 100 divs, maka saya harus menduplikasi 100 kali. Silakan jalankan kode di bawah ini untuk ilustrasi yang lebih jelas.

const settings = {
  Desktop: {
    width: "100%",
    gridTemplateColumns: "repeat(2,minmax(200px,1fr))"
  },
  Tablet: {
    width: "60%",
    gridTemplateColumns: "repeat(1,minmax(200px,1fr))"
  },
  Phone: {
    width: "30%",
    gridTemplateColumns: "repeat(1,minmax(200px,1fr))"
  }
}

function resize(which) {
  let x = document.querySelectorAll(".Container");
  for (let i = 0; i < x.length; i++) {
    x[i].style.width = settings[which].width;
  }
  x = document.querySelectorAll(".Setting");
  for (let i = 0; i < x.length; i++) {
    x[i].style.gridTemplateColumns = settings[which].gridTemplateColumns;
  }
}
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: grey;
}

.hr {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 15px;
}

.Medium {
  margin: 0 15px;
}

.Container {
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: 0.9s;
  margin: 15px 0;
}

.Setting {
  align-items: stretch;
  grid-template-columns: repeat(2, minmax(200px, 1fr));
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  display: grid;
  text-align: left;
}

.Content {
  width: 200px;
  height: 120px;
  background-color: blue;
}
<div class="hr">
  <button class="Desktop" onclick="resize('Desktop')">Desktop</button>
  <button class="Medium" onclick="resize('Tablet')">Tablet</button>
  <button class="Full" onclick="resize('Phone')">Phone</button>
</div>
<div class="Container">
  <p>First Part</p>
  <div class="Setting">
    <div class="Content"></div>
    <div class="Content"></div>
  </div>
</div>
<div class="hr">
  <button class="Desktop" onclick="resize('Desktop')">Desktop</button>
  <button class="Medium" onclick="resize('Tablet')">Tablet</button>
  <button class="Full" onclick="resize('Phone')">Phone</button>
</div>
<div class="Container">
  <p>Second Part</p>
  <div class="Setting">
    <div class="Content"></div>
    <div class="Content"></div>
  </div>
</div>
0
Ace 29 Mei 2021, 02:21

1 menjawab

Jawaban Terbaik

Langkah pertama adalah menghapus penangan inline, karena mereka secara universal dianggap sebagai praktik yang mengerikan dan tidak memiliki alasan dalam kode modern.

Anda dapat beralih masing-masing .Container dan lampirkan pendengar acara ke bagian saudara sebelumnya - tombol .hr. Pada tombol klik, dapatkan konten teks dari tombol yang diklik untuk mengetahui properti settings mana yang perlu diakses, dan menetapkannya pada gaya wadah yang sedang diperkuat.

const settings = {
  Desktop: {
    width: "100%",
    gridTemplateColumns: "repeat(2,minmax(200px,1fr))"
  },
  Tablet: {
    width: "60%",
    gridTemplateColumns: "repeat(1,minmax(200px,1fr))"
  },
  Phone: {
    width: "30%",
    gridTemplateColumns: "repeat(1,minmax(200px,1fr))"
  }
};

for (const container of document.querySelectorAll('.Container')) {
  container.previousElementSibling.addEventListener('click', (e) => {
    if (!e.target.matches('button')) return;
    const resizeToObj = settings[e.target.textContent];
    container.style.width = resizeToObj.width;
    container.querySelector('.Setting').style.gridTemplateColumns = resizeToObj.gridTemplateColumns;
  });
}
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: grey;
}

.hr {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 15px;
}

.Medium {
  margin: 0 15px;
}

.Container {
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: 0.9s;
  margin: 15px 0;
}

.Setting {
  align-items: stretch;
  grid-template-columns: repeat(2, minmax(200px, 1fr));
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  display: grid;
  text-align: left;
}

.Content {
  width: 200px;
  height: 120px;
  background-color: blue;
}
<div class="hr">
  <button class="Desktop">Desktop</button>
  <button class="Medium">Tablet</button>
  <button class="Full">Phone</button>
</div>
<div class="Container">
  <p>First Part</p>
  <div class="Setting">
    <div class="Content"></div>
    <div class="Content"></div>
  </div>
</div>
<div class="hr">
  <button class="Desktop">Desktop</button>
  <button class="Medium">Tablet</button>
  <button class="Full">Phone</button>
</div>
<div class="Container">
  <p>Second Part</p>
  <div class="Setting">
    <div class="Content"></div>
    <div class="Content"></div>
  </div>
</div>
0
CertainPerformance 28 Mei 2021, 23:50