Apa itu toggle daftar kelas di javascript?

Cara beralih kelas pada elemen dengan JavaScript adalah salah satu keterampilan paling praktis yang dapat Anda pelajari sebagai pengembang. Toggling digunakan untuk banyak hal, termasuk menampilkan dan menyembunyikan menu, menambah dan menghapus filter pencarian, dan tombol media sosial (suka, jempol ke atas, dll. )

Toggling tidak harus lebih rumit dari beberapa baris kode, tentu saja tergantung pada konteksnya. Hari ini kita akan mempelajari cara sederhana untuk memulai tidak hanya dengan beralih tetapi mempelajari JavaScript secara umum

Struktur HTML

Sebelum kita masuk ke hal-hal fungsional dengan JavaScript, mari siapkan beberapa elemen HTML sehingga kita memiliki sesuatu untuk berinteraksi. Mari buat pembungkus, tombol, dan kotak

Letakkan yang berikut di dalam tag tubuh dokumen HTML Anda

<div class="wrapper">
  <button class="button">Toggle</button>
  <div class="box"></div>
</div>

Elemen div induk (pembungkus) hanya ada sehingga kita dapat memusatkan elemen anaknya (kotak dan tombol) dengan CSS. Ini kosmetik, dan tidak perlu untuk bekerja

Catatan. jika Anda menggunakan editor kode online seperti CodePen, Anda dapat menambahkan kode ini di jendela tab HTML. Mereka menambahkan sisa HTML untuk Anda di belakang layar, termasuk body tag

Gaya CSS

Elemen div induk memiliki kelas .wrapper yang memiliki beberapa properti Flexbox yang menyelaraskan tengah elemen anaknya. kotak dan tombol. Saya tidak akan membahas bagaimana dan mengapa Flexbox, itu untuk tutorial lainnya

Tombol dan kotak mendapatkan beberapa kelas gaya dasar untuk keperluan kosmetik

.wrapper {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.box {
  width: 200px;
  height: 200px;
  background-color: #eeeeee;
}

.button {
  display: block;
  text-align: center;
  font-size: 1.5rem;
  color: white;
  background-color: #262422;
  border-radius: 4px;
  padding: 1rem 2rem;
  margin-bottom: 1rem;
}

.bg-red {
  background-color: #aa2f18;
}

Hal penting yang perlu diperhatikan di sini adalah kelas .bg-red yang berisi properti CSS background-color dengan nilai '#AA2F18' (merah). Ini adalah kelas yang ingin kita alihkan (tambah atau hapus) ke elemen kotak kita saat kita mengklik elemen tombol

Penanganan Acara JavaScript

Sebelum kita dapat mulai memanipulasi elemen dengan JavaScript, pertama-tama kita harus menyimpan referensi ke dua elemen kita (kotak dan tombol). Kami melakukannya dengan mendeklarasikan dua variabel, button, dan box. Kemudian kami menetapkan dua elemen ke variabel masing-masing

Untuk memilih elemen kotak dan tombol yang ingin kita simpan referensinya, kita akan menggunakan metode querySelector yang mulia untuk mengambil kelas elemen kita

let button = document.querySelector(".button");
let box = document.querySelector(".box");

Sekarang setelah kita memiliki referensi ke setiap elemen target kita, kita dapat memanipulasi DOM, dengan mengakses properti dan metodenya. Dalam hal ini, kami ingin menggunakan pendengar acara yang mendengarkan acara klik pada elemen tombol. Setelah klik terdeteksi, kami ingin menjalankan fungsi yang menjalankan toggling warna latar belakang pada elemen kotak kami

Untuk melakukan itu, kami akan melampirkan metode addEventListener() ke elemen tombol kami (melalui referensi variabelnya). Di dalam metode pendengar acara ini kami menambahkan dua nilai parameter.

.wrapper {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.box {
  width: 200px;
  height: 200px;
  background-color: #eeeeee;
}

.button {
  display: block;
  text-align: center;
  font-size: 1.5rem;
  color: white;
  background-color: #262422;
  border-radius: 4px;
  padding: 1rem 2rem;
  margin-bottom: 1rem;
}

.bg-red {
  background-color: #aa2f18;
}

.wrapper {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.box {
  width: 200px;
  height: 200px;
  background-color: #eeeeee;
}

.button {
  display: block;
  text-align: center;
  font-size: 1.5rem;
  color: white;
  background-color: #262422;
  border-radius: 4px;
  padding: 1rem 2rem;
  margin-bottom: 1rem;
}

.bg-red {
  background-color: #aa2f18;
}

Kemudian di dalam fungsi anonim. kami melampirkan metode

.wrapper {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.box {
  width: 200px;
  height: 200px;
  background-color: #eeeeee;
}

.button {
  display: block;
  text-align: center;
  font-size: 1.5rem;
  color: white;
  background-color: #262422;
  border-radius: 4px;
  padding: 1rem 2rem;
  margin-bottom: 1rem;
}

.bg-red {
  background-color: #aa2f18;
}

button.addEventListener("click", function() {
  box.classList.toggle("bg-red");
});

Metode toggle classList berfungsi seperti ini. jika kelas yang ditentukan sudah ada pada elemen target, maka akan dihapus. Jika tidak ada, maka akan ditambahkan

Dilakukan. Anda sekarang tahu cara mengaktifkan kelas pada elemen tertentu dengan JavaScript biasa. Saya memasang semua kode dari tutorial ini di CodePen

Apa gunanya toggle classList ini di JavaScript?

Apa itu beralih dalam JavaScript?

Apa arti classList JavaScript?

Apa yang dilakukan kelas toggle?