jquery membatalkan perubahan warna selepas klik

Dalam pembangunan web, jQuery sering digunakan untuk mencapai beberapa kesan interaktif biasa. Antaranya, menukar warna elemen selepas mengklik adalah kesan interaktif biasa. Walau bagaimanapun, dalam beberapa kes kita perlu membatalkan perubahan warna elemen pada klik. Artikel ini akan memperkenalkan cara menggunakan jQuery untuk membatalkan kesan perubahan warna selepas mengklik.

1. Tukar warna elemen selepas mengklik

Mula-mula, mari kita lihat cara menggunakan jQuery untuk menukar warna elemen selepas mengklik.

Kod HTML adalah seperti berikut:

<div class="box">点击我变色</div>

Gaya CSS adalah seperti berikut:

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  color: white;
  text-align: center;
  line-height: 100px;
  cursor: pointer;
}

Langkah 1: Kami menambah acara klik pada elemen div ini . Apabila diklik, tukar warna latar belakangnya melalui jQuery.

$('.box').click(function() {
  $(this).css('background-color', 'blue');
});

Langkah 2: Dengan cara ini, apabila kita mengklik pada elemen div, warna latar belakangnya akan bertukar kepada biru.

Seperti yang ditunjukkan di bawah:

2 Batalkan perubahan warna elemen selepas mengklik

Seterusnya, kami akan memperkenalkan cara menggunakan jQuery Capai membatalkan kesan perubahan warna elemen selepas mengklik.

Kod HTML dan gaya CSS adalah sama seperti di atas.

Langkah 1: Kita perlu menambah pembolehubah untuk menentukan sama ada elemen telah diklik.

var clicked = false;

$('.box').click(function() {
  if(!clicked) {
    $(this).css('background-color', 'blue');
    clicked = true;
  }
});

Langkah 2: Ubah suai fungsi acara klik Apabila elemen diklik, warnanya dipulihkan kepada warna awal melalui jQuery.

var clicked = false;

$('.box').click(function() {
  if(!clicked) {
    $(this).css('background-color', 'blue');
    clicked = true;
  } else {
    $(this).css('background-color', 'red');
    clicked = false;
  }
});

Seperti yang ditunjukkan dalam kod di atas, apabila elemen diklik, jika ia belum diklik sebelum ini, warna latar belakangnya ditetapkan kepada biru dan pembolehubah yang diklik ditetapkan kepada benar. Jika elemen telah diklik, tetapkan warna latar belakangnya kepada merah dan tetapkan pembolehubah yang diklik kepada palsu.

Dengan cara ini, apabila kita mengklik pada elemen, warna latar belakangnya akan berubah daripada merah kepada biru.

Seperti yang ditunjukkan di bawah:

Apabila kita mengklik elemen sekali lagi, warna latar belakangnya akan berubah daripada biru kepada merah.

Seperti yang ditunjukkan di bawah:

3 Ringkasan

Sangat mudah untuk menggunakan jQuery untuk membatalkan kesan perubahan warna elemen selepas. mengklik. Anda hanya perlu menambah pembolehubah untuk merekodkan sama ada elemen telah diklik, dan kemudian menukar warna elemen melalui jQuery mengikut nilai berbeza pembolehubah. Kesan ini boleh digunakan untuk membatalkan keadaan elemen, menjadikan halaman lebih mesra pengguna dan intuitif.

Atas ialah kandungan terperinci jquery membatalkan perubahan warna selepas klik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!