如何使用 jQuery 在點擊時在功能之間切換？

使用jQuery 在點擊時在函數之間切換

在jQuery 中，點擊元素時在函數之間切換的任務可以用不同的方法來完成

內建jQuery .toggle()

jQuery 提供了兩個版本的 .toggle() 方法。問題中提到的用於可見性切換的那個現在已被棄用。但是，有一個專門為單擊時在功能之間切換而設計的替代版本。

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

此方法接受兩個函數作為參數，並在每次點擊時在它們之間切換。

自訂外掛程式

作為替代方案，可以建立一個提供更通用實作的自訂外掛程式。這個名為“clickToggle”的插件允許分配多個函數，並且可用於任何事件。

$.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;
};

要使用此插件，請將函數指定為參數：

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

改進的實現

提供的程式碼可以進一步優化以獲得更好的性能：

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

這種方法透過僅分配點擊處理程序顯著減少了函數呼叫的數量一次，從而加快執行時間。

以上是如何使用 jQuery 在點擊時在功能之間切換？的詳細內容。更多資訊請關注PHP中文網其他相關文章！