Bagaimana untuk Beralih Antara Fungsi pada Klik Menggunakan jQuery?

Bertukar Antara Fungsi pada Klik dengan jQuery

Dalam jQuery, tugas berselang seli antara fungsi apabila elemen diklik boleh dicapai dengan berbeza pendekatan.

jQuery terbina dalam .toggle()

jQuery menyediakan dua versi kaedah .toggle(). Soalan yang disebut dalam soalan, yang digunakan untuk togol keterlihatan, kini tidak digunakan lagi. Walau bagaimanapun, terdapat versi alternatif yang direka khusus untuk bertukar antara fungsi pada klik.

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

Kaedah ini menerima dua fungsi sebagai hujah dan berselang-seli antara fungsi tersebut dengan setiap klik.

Pemalam Tersuai

Sebagai alternatif, anda boleh membuat pemalam tersuai yang menyediakan pelaksanaan yang lebih serba boleh. Pemalam ini, dipanggil "clickToggle," membenarkan berbilang fungsi diperuntukkan dan boleh digunakan untuk sebarang acara.

$.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) % funcs.length;
    });
    return this;
};

Untuk menggunakan pemalam ini, nyatakan fungsi sebagai argumen:

$('#element').clickToggle(function1, function2);

Pelaksanaan Yang Diperbaiki

Kod yang disediakan boleh dioptimumkan lagi untuk prestasi yang lebih baik:

$(function() {
    var clickCallbacks = [function1, function2];
    $('#element').click(function() {
        clickCallbacks[$(this).data('toggleclicked')++]();
    });
});

Pendekatan ini mengurangkan bilangan panggilan fungsi dengan memperuntukkan pengendali klik sahaja sekali, menghasilkan masa pelaksanaan yang lebih cepat.

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