Bagaimana untuk Melaksanakan Fungsi Berbeza pada Berbilang Klik dengan jQuery?

Klik dan Togol: Menjalankan Fungsi Berbeza dengan jQuery

Pembangun sering menghadapi keperluan untuk melaksanakan blok kod yang berbeza apabila elemen tertentu diklik beberapa kali. jQuery menawarkan pelbagai penyelesaian untuk menangani keperluan ini, termasuk .toggle(). Walau bagaimanapun, .toggle() mungkin tidak sentiasa mencapai kefungsian yang diingini.

Satu pendekatan ialah menggunakan kaedah .toggle() terbina dalam jQuery. Walau bagaimanapun, perlu diingat bahawa sejak jQuery 1.7, versi .toggle() ini telah ditamatkan dan kemudiannya dialih keluar dalam jQuery 1.9. Ini disebabkan terutamanya oleh kewujudan pelbagai kaedah .toggle().

Bagi mereka yang mencari alternatif, jQuery menyediakan pemalam ringkas dan serba boleh yang direka khusus untuk tujuan ini.

(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));

Ini pemalam, dipanggil .clickToggle(), memerlukan dua parameter: fungsi yang harus dilaksanakan pada klik pertama dan kedua. Ia memberikan nilai data dalaman untuk menjejak kiraan klik semasa. Apabila elemen diklik, ia mendapatkan semula data ini dan memanggil fungsi yang sesuai.

Untuk menggunakan pemalam, hanya panggil ia pada elemen yang dikehendaki dan sediakan fungsi yang berkaitan:

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

Dalam ringkasan, jQuery menawarkan berbilang pilihan untuk menogol antara fungsi yang berbeza pada klik elemen. Walaupun .toggle() mungkin tidak selalu mencukupi, pemalam yang dinyatakan di atas menyediakan penyelesaian yang disesuaikan yang boleh disesuaikan dan cekap.

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