如何使用 jQuery 在元素单击的两个函数之间切换？-js教程-PHP中文网

如何使用 jQuery 在元素单击的两个函数之间切换？

Barbara Streisand

发布： 2024-11-09 01:42:02

原创

686 人浏览过

How to Toggle Between Two Functions on Element Click Using jQuery?

jQuery 单击在两个函数之间切换

需要根据元素被单击一次还是多次来执行不同的操作？以下是如何使用 jQuery 实现它：

内置 .toggle() 方法

jQuery 提供了两种 .toggle() 方法：

一种方法可以切换元素的可见性。
A 已弃用的方法（在 jQuery 1.9 中已删除）称为toggle(func1, func2)，可有效处理元素单击时两个函数之间的切换。

自定义插件实现

作为插件，此功能可以实现为如下：

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

登录后复制

使用方法

使用插件，可以调用：

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

登录后复制

具体示例

根据原来的问题，您可以实现所需的功能：如下：

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

登录后复制

以上是如何使用 jQuery 在元素单击的两个函数之间切换？的详细内容。更多信息请关注PHP中文网其他相关文章！