Bagaimana untuk Togol Antara Dua Fungsi pada Klik Elemen Menggunakan jQuery?

Togol Klik jQuery Antara Dua Fungsi

Perlu melaksanakan tindakan berbeza berdasarkan sama ada elemen diklik sekali atau beberapa kali? Begini cara untuk mencapainya dengan jQuery:

Kaedah .toggle() Terbina dalam

jQuery menawarkan dua kaedah .toggle():

• Satu kaedah menogol keterlihatan unsur.
• A Kaedah tidak digunakan (dialih keluar dalam jQuery 1.9) dipanggil toggle(func1, func2) dengan cekap mengendalikan togol antara dua fungsi pada klik elemen.

Pelaksanaan Pemalam Tersuai

Sebagai pemalam, fungsi ini boleh dilaksanakan sebagai berikut:

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

Penggunaan

Dengan pemalam, anda boleh menghubungi:

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

Contoh Khusus

Berdasarkan soalan asal, anda boleh mencapai fungsi yang diingini sebagai berikut:

var count = 0;
$("#time").clickToggle(
    function() {
        $(this).animate({
            width: "260px"
        }, 1500);
    },
    function() {
        $(this).animate({
            width: "30px"
        }, 1500);
    }
);

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