如何使用 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中文网其他相关文章！