Gunakan jQuery untuk menukar warna pada butang klik

Artikel ini bertujuan untuk membantu pemaju menyelesaikan masalah tidak dapat menukar warna apabila mengklik butang apabila menggunakan jQuery. Biasanya, ini boleh disebabkan oleh tidak termasuk perpustakaan jQuery dengan betul. Artikel ini akan menyediakan penyelesaian terperinci, termasuk cara memperkenalkan jQuery dengan betul, serta kod sampel yang boleh dilancarkan yang menunjukkan cara menggunakan jQuery untuk mendengar peristiwa klik butang dan mengubahsuai warna latar belakangnya.

Pastikan jQuery diperkenalkan dengan betul

Sebelum menggunakan jQuery, pastikan anda memasukkan perpustakaan jQuery dengan betul dalam fail HTML anda. Ini adalah sumber masalah yang paling biasa. Ia boleh diperkenalkan dengan cara berikut:

1. Gunakan pautan CDN: Ini adalah cara yang paling mudah dan terpantas. Tambahkan kod berikut ke hujung tag atau tag fail html anda:

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"> </script>

Nota: Adalah disyorkan untuk menggunakan pautan CDN yang stabil dan periksa ketersediaannya secara teratur.

2. Muat turun fail jQuery dan importnya secara tempatan: Muat turun versi terkini fail jQuery dari laman web rasmi JQuery ( //m.sbmmt.com/link/80CB49DB30E21273C9ACAF03212060F8 ) dan letakkan di direktori projek anda. Kemudian rujuk fail menggunakan tag <script> dalam fail HTML. Sebagai contoh, jika anda meletakkan fail JQuery-3.7.0.min.js dalam direktori JS, anda boleh menggunakan kod berikut:</script>

 <script src="js/jQuery-3.7.0.min.js"> </script>

Nota: Pastikan laluan fail betul.

Sahkan sama ada jQuery berjaya diperkenalkan:

Selepas memperkenalkan jQuery, anda boleh memasukkan jQuery atau $ dalam konsol alat pemaju pelayar (biasanya dibuka dengan menekan kekunci F12). Sekiranya objek jQuery dikembalikan, jQuery telah diperkenalkan dengan jayanya. Sekiranya referensi yang tidak diketahui: $ tidak ditakrifkan ralat berlaku, ini bermakna bahawa jQuery tidak diperkenalkan dengan betul.

Gunakan jQuery untuk mendengar acara klik dan tukar warna

Sebaik sahaja anda mengesahkan bahawa jQuery telah berjaya diperkenalkan, anda boleh menggunakan jQuery untuk mendengar acara klik butang dan mengubah warna latar belakangnya. Berikut adalah kod contoh:

 


<tirly> Button Warna Change 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"> </script>
<yaya>
  .vote {
    Padding: 10px 20px;
    saiz font: 16px;
    kursor: penunjuk;
  }




<div class="rating">
  <button class="Vote"> 1 </button>
  <button class="Vote"> 2 </button>
  <button class="Vote"> 3 </button>
  <button class="Vote"> 4 </button>
  <button class="Vote"> 5 </button>
</div>

<script>
$ (dokumen) .ready (fungsi () {
  $ (". Undi"). ("Klik", fungsi () {
    $ (ini) .css ("latar belakangColor", "HSL (216, 12%, 54%)");
  });
});
</script>


</yaya></tirly>

Penjelasan kod:

• $ (dokumen) .ready (fungsi () {...}); : Kod ini memastikan bahawa kod jQuery dilaksanakan selepas keseluruhan dokumen HTML dimuatkan.
• $ (". Undi"). pada ("klik", fungsi () {...}); : Kod ini memilih semua elemen dengan undi kelas (dalam kes ini, semua butang) dan mengikat fungsi ke acara klik mereka.
• $ (ini) .css ("latar belakangColor", "HSL (216, 12%, 54%)"); : Apabila butang diklik, kod ini akan menetapkan warna latar belakang butang yang diklik pada HSL (216, 12%, 54%). $ (ini) merujuk kepada elemen butang yang diklik sekarang.

Gaya CSS (Pilihan):

Untuk menjadikan butang kelihatan lebih cantik, anda boleh menambah beberapa gaya CSS dalam tag , seperti menetapkan padding, saiz fon dan kursor butang.

Meringkaskan

Melalui artikel ini, anda harus dapat menyelesaikan masalah yang tidak dapat menukar warna apabila mengklik butang apabila menggunakan jQuery. Kuncinya adalah untuk memastikan anda memasukkan perpustakaan jQuery dengan betul dan menggunakan kod jQuery yang betul untuk mendengar acara klik dan mengubahsuai gaya. Ingat, mesej ralat menyemak semula dan debugging dengan alat pemaju penyemak imbas anda dapat membantu anda mencari masalah dengan cepat.

Atas ialah kandungan terperinci Gunakan jQuery untuk menukar warna pada butang klik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!