jquery klik kedua membatalkan acara

Apabila menggunakan jQuery untuk melaksanakan halaman interaktif, selalunya perlu untuk mengikat peristiwa klik pada butang atau elemen. Dalam sesetengah senario, cukup untuk pengguna mengklik sekali untuk mencetuskan operasi tertentu, manakala dalam senario lain, pengguna perlu mengklik sekali lagi untuk membatalkan pelaksanaan operasi. Jadi bagaimana untuk menggunakan jQuery untuk mengikat acara klik dan melaksanakan fungsi batal pada klik kedua?

1. Gunakan acara klik jQuery

jQuery menyediakan acara klik untuk mengikat acara klik elemen. Contohnya:

$(".btn").click(function() {
  console.log("button clicked");
});

Kod ini akan mengikat acara klik pada elemen dengan kelas "btn". Apabila elemen diklik, "butang yang diklik" akan dikeluarkan ke konsol.

2. Gunakan fungsi togol jQuery

Untuk melaksanakan fungsi batal pada klik kedua, kita boleh menggunakan fungsi togol yang disediakan oleh jQuery. Fungsi togol menukar pelaksanaan antara dua fungsi panggil balik. Contohnya:

$(".btn").toggle(
  function() {
    console.log("button clicked");
  },
  function() {
    console.log("button clicked again");
  }
);

Dalam contoh ini, apabila elemen dengan kelas "btn" diklik buat kali pertama, fungsi panggil balik pertama akan dilaksanakan dan "butang yang diklik" akan dikeluarkan dan apabila ia diklik untuk kali kedua, fungsi panggil balik kedua akan dilaksanakan dan "butang diklik semula" akan dikeluarkan. Kaedah ini agak mudah, tetapi ia hanya sesuai untuk menukar antara dua situasi.

3. Gunakan fungsi on jQuery

Berbanding dengan pengehadan fungsi togol, kita boleh menggunakan fungsi on jQuery untuk melaksanakan fungsi cancel pada klik kedua dengan lebih fleksibel. Fungsi on boleh mengikat berbilang acara kepada elemen dan mengikat fungsi pengendalian acara melalui perwakilan acara. Contohnya:

$(".btn").on("click", function() {
  if ($(this).attr("data-clicked") == "true") {
    console.log("button clicked again");
    $(this).attr("data-clicked", "false");
  } else {
    console.log("button clicked");
    $(this).attr("data-clicked", "true");
  }
});

Dalam contoh ini, kami mengikat acara klik pada elemen dengan kelas "btn", dan menambah atribut tersuai "data-clicked" pada elemen untuk menentukan sama ada elemen itu Diklik. Apabila elemen diklik buat kali pertama, "butang diklik" adalah output dan atribut "diklik data" ditetapkan kepada "benar". ditetapkan kepada "palsu". Dengan cara ini, kita boleh melaksanakan fungsi batal pada klik kedua.

Ringkasan

Gunakan jQuery untuk melaksanakan fungsi batal pada klik kedua, yang boleh dicapai melalui fungsi togol atau atribut tersuai dan delegasi acara. Adalah perlu untuk memilih kaedah yang sesuai mengikut senario sebenar untuk mengawal interaksi pengguna halaman dengan lebih mudah.

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