Bagaimana untuk Menambah Kelas pada Elemen Berdasarkan Nilai Atribut Datanya Menggunakan jQuery?

jQuery: Cari Elemen mengikut Nilai Atribut Data

Dalam penanda HTML, elemen boleh mempunyai atribut data tersuai yang diberikan kepada mereka menggunakan data-* sintaks atribut. Atribut ini biasanya digunakan untuk menyimpan maklumat tambahan yang boleh diakses atau dimanipulasi oleh kod JavaScript.

Satu kes penggunaan biasa ialah menambah kelas tertentu pada elemen berdasarkan nilai atribut datanya. Sebagai contoh, pertimbangkan elemen HTML berikut:

<a class="slide-link" href="#" data-slide="0">1</a><br><a class="slide-link" href="#" data-slide="1">2</a><br><a class="slide-link" href="#" data- slide="2">3</a><br>

Matlamat kami ialah untuk menambah kelas "aktif" pada elemen dengan nilai atribut slaid data 0 (sifar ).

Pemilih Sama Atribut

jQuery menyediakan pemilih sama atribut yang membolehkan kami memilih elemen berdasarkan nilai tepat atribut tertentu. Untuk mencapai matlamat kami, kami boleh menggunakan kod berikut:

$('.slide-link[data-slide="0"]').addClass('active');<br>

Kod ini memilih elemen dengan atribut kelas "slaid-pautan" dan data-slaid sama dengan "0". Ia kemudian menambahkan kelas "aktif" padanya.

Memahami .find()

Kaedah .find() yang digunakan dalam percubaan awal, berfungsi dengan merentasi pokok DOM. Walau bagaimanapun, dalam kes ini, kami ingin memilih elemen berdasarkan atribut datanya, bukan pada keturunannya. Oleh itu, penggunaan atribut sama dengan pemilih adalah lebih sesuai untuk tugasan ini.

Atas ialah kandungan terperinci Bagaimana untuk Menambah Kelas pada Elemen Berdasarkan Nilai Atribut Datanya Menggunakan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!