jquery klik pada elemen kanak-kanak untuk menambah gaya

Cara mengklik elemen kanak-kanak dan menambah gaya dengan jQuery

jQuery ialah perpustakaan JavaScript popular yang membenarkan kod JavaScript ditulis dengan cara yang meningkatkan kesederhanaan dan kebolehbacaan kod. jQuery mempunyai satu siri fungsi manipulasi DOM yang memudahkan untuk memanipulasi elemen pada halaman. Dalam artikel ini, saya akan menunjukkan kepada anda cara menggunakan jQuery untuk mengklik pada elemen kanak-kanak dan menambah gaya.

Langkah 1: Perkenalkan jQuery

Tambah pustaka jQuery pada fail HTML anda. Anda boleh memuat turunnya dari tapak web rasmi atau menyambung terus ke CDN jQuery dalam fail HTML anda. Di sini kami mengambil CDN sebagai contoh:

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Langkah 2: Tulis kod HTML dan CSS

Sediakan halaman HTML dengan berbilang sub-elemen yang akan diklik. Pada masa yang sama, tetapkan gaya dalam CSS untuk membezakan perubahan gaya selepas mengklik. Contohnya:

<div id="parent">
  <div class="child">子元素1</div>
  <div class="child">子元素2</div>
  <div class="child">子元素3</div>
</div>

.child {
  padding: 10px;
  border: 1px solid black;
  cursor: pointer;
}

.clicked {
  background-color: yellow;
}

Di sini, kami menyediakan tiga elemen kanak-kanak yang akan menukar warna latar belakangnya apabila diklik.

Langkah 3: Tulis Kod jQuery

Kita perlu menulis beberapa kod untuk mengendalikan perkara yang berlaku apabila elemen anak diklik. Pertama, kita perlu memilih semua elemen kanak-kanak. Menggunakan pemilih elemen kanak-kanak jQuery, kami boleh memilih semua elemen kanak-kanak dengan mudah di bawah elemen induk:

var children = $('#parent > .child');

Seterusnya, kami perlu menambah pendengar acara klik untuk setiap elemen kanak-kanak. Kita boleh melakukan ini menggunakan fungsi each() jQuery. Fungsi ini menerima fungsi panggil balik yang akan digunakan pada setiap elemen. Dalam fungsi panggil balik ini, kami akan menambah pendengar acara klik untuk meningkatkan gaya elemen kanak-kanak:

children.each(function() {
  $(this).on('click', function() {
    $(this).addClass('clicked');
  });
});

Di sini, kami menggunakan fungsi on() jQuery untuk menambah pendengar acara klik. Fungsi ini menerima dua parameter. Yang pertama ialah jenis acara, kami menggunakan "klik". Parameter kedua ialah fungsi panggil balik, yang dilaksanakan apabila klik bertindak balas. Dalam fungsi panggil balik ini, kami memanggil fungsi addClass() pada elemen kanak-kanak untuk menambah kelas "diklik" kepada elemen kanak-kanak. Kami mentakrifkan kelas "diklik" yang akan menukar warna latar belakang elemen kanak-kanak.

Kod jQuery yang lengkap adalah seperti berikut:

$(document).ready(function() {

  var children = $('#parent > .child');

  children.each(function() {
    $(this).on('click', function() {
      $(this).addClass('clicked');
    });
  });

});

Akhir sekali, kami meletakkan semua kod dalam fungsi $(document).ready() dan melaksanakannya selepas DOM dimuatkan sepenuhnya.

Kesimpulan

Dalam artikel ini, kami telah mempelajari cara menggunakan jQuery untuk mengklik elemen kanak-kanak dan menambah gaya. Kita perlu memilih semua elemen kanak-kanak dan kemudian menambah pendengar acara klik untuk setiap elemen kanak-kanak. Dalam fungsi panggil balik, kita boleh menggunakan fungsi addClass() untuk menambah kelas pada elemen anak, supaya kita boleh menambah pelbagai gaya pada elemen anak kita. Jika anda ingin menambah atribut lain unsur kanak-kanak, anda juga boleh belajar dan berlatih dalam pendengar acara klik.

Atas ialah kandungan terperinci jquery klik pada elemen kanak-kanak untuk menambah gaya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!