Bagaimanakah Saya Boleh Mencetuskan Peristiwa Berdasarkan Perubahan Kelas CSS dalam jQuery?

Mencetuskan Peristiwa pada Pengubahsuaian Kelas CSS dalam jQuery

Dalam jQuery, anda mungkin menghadapi keperluan untuk melaksanakan acara apabila kelas CSS sama ada ditambah atau diubah suai dalam elemen . Walau bagaimanapun, tiada peristiwa yang wujud yang mencetuskan perubahan kelas CSS.

Penyelesaian Acara Tersuai

Untuk menangani perkara ini, anda boleh menggunakan acara tersuai menggunakan fungsi pencetus(). Apabila anda mengubah suai kelas dengan addClass(), anda menaikkan acara tersuai, yang kemudiannya boleh terikat pada elemen tertentu.

$(this).addClass('someClass');
$(mySelector).trigger('cssClassChanged');

Dalam bahagian lain kod, anda boleh mengikat acara tersuai pada pemilih dan tentukan tindakan yang akan dilaksanakan apabila perubahan kelas berlaku.

$(otherSelector).bind('cssClassChanged', data, function(){ do stuff });

Contoh Pelaksanaan

Pertimbangkan coretan kod berikut:

$(function() {
  var button = $('.clickme')
      , box = $('.box')
  ;
  
  button.on('click', function() { 
    box.removeClass('box');
    $(document).trigger('buttonClick');
  });
            
  $(document).on('buttonClick', function() {
    box.text('Clicked!');
  });
});

.box { background-color: red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="box">Hi</div>
<button class="clickme">Click me</button>

Dalam contoh ini, apabila butang diklik, kelas "kotak" dialih keluar. Ini mencetuskan acara tersuai "buttonClick," yang menukar teks div dengan kelas "box" kepada "Clicked!"

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencetuskan Peristiwa Berdasarkan Perubahan Kelas CSS dalam jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!