Bagaimana untuk Togol Fungsi pada Klik dengan jQuery?

Togol Fungsi pada Klik dengan jQuery

Apabila berinteraksi dengan elemen pada halaman web, selalunya wajar untuk mencetuskan gelagat berbeza berdasarkan satu klik peristiwa. Satu pendekatan adalah untuk melaksanakan logik tersuai untuk menyemak kiraan klik dan melaksanakan fungsi tertentu dengan sewajarnya. Walau bagaimanapun, jQuery menyediakan penyelesaian yang lebih cekap dengan kaedah .toggle()nya.

Menggunakan jQuery .toggle()

jQuery menawarkan dua kaedah toggle(): satu untuk menogol keterlihatan elemen dan satu lagi yang direka khusus untuk melaksanakan fungsi. Kaedah .toggle() yang terakhir mengambil dua hujah fungsi:

$(selector).toggle(function1, function2);

Kaedah ini bertukar-tukar antara dua fungsi setiap kali elemen diklik. Contohnya:

$('#time').toggle(
  function() {
    $(this).animate({ width: "260px" }, 1500);
  },
  function() {
    $(this).animate({ width: "30px" }, 1500);
  }
);

Dalam contoh ini, mengklik elemen dengan ID "masa" akan mencetuskan fungsi pertama, menjadikannya berkembang kepada lebar 260px. Mengkliknya sekali lagi akan mencetuskan fungsi kedua, mengurangkan lebarnya kepada 30px.

Pelaksanaan Pemalam Tersuai

Sementara kaedah .toggle() terbina dalam jQuery ditamatkan, berikut ialah pelaksanaan alternatif yang menyediakan fungsi yang serupa:

(function($) {
    $.fn.clickToggle = function(func1, func2) {
        var funcs = [func1, func2];
        this.data('toggleclicked', 0);
        this.click(function() {
            var data = $(this).data();
            var tc = data.toggleclicked;
            $.proxy(funcs[tc], this)();
            data.toggleclicked = (tc + 1) % 2;
        });
        return this;
    };
}(jQuery));

Pemalam ini boleh digunakan dengan cara yang sama seperti kaedah .toggle() asal tetapi mendayakan togol berbilang fungsi.

Kesimpulan

Dengan memanfaatkan kaedah .toggle() jQuery atau a pemalam tersuai, pembangun web boleh melaksanakan gelagat berselang-seli dengan mudah pada acara klik, menyediakan antara muka pengguna yang lebih dinamik dan responsif.

Atas ialah kandungan terperinci Bagaimana untuk Togol Fungsi pada Klik dengan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!