jQuery单击切换两个功能

发布于02月06日

我正在寻找一种方法，有两个独立的操作/函数/"代码块"被单击时运行，然后当同样的事情再次被单击时，运行一个完全不同的挡路.我把这些放在一起.我想知道有没有更有效/更优雅的方式.我知道jQuery .toggle()，但它有点糟糕.

Working here: http://jsfiddle.net/reggi/FcvaD/1/

var count = 0;
$("#time").click(function() {
    count++;
    //even odd click detect 
    var isEven = function(someNumber) {
        return (someNumber % 2 === 0) ? true : false;
    };
    // on odd clicks do this
    if (isEven(count) === false) {
        $(this).animate({
            width: "260px"
        }, 1500);
    }
    // on even clicks do this
    else if (isEven(count) === true) {
        $(this).animate({
            width: "30px"
        }, 1500);
    }
});

推荐答案

jQuery有两个名为.toggle()的方法.other one ^[docs]完全符合您对单击事件的要求.

Note:似乎至少从jQuery 1.7年开始，.toggle的这个版本是deprecated，可能正是因为这个原因，即存在两个版本.使用.toggle来更改元素的可见性只是一种更常见的用法.方法为removed in jQuery 1.9.

下面是一个示例，说明如何实现与插件相同的功能(但可能会expose 出与内置版本相同的问题(请参阅文档中的最后一段)).

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

DEMO

(Disclaimer: I don't say this is the best implementation! I bet it can be improved in terms of performance)

And then call it with:

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

Update 2:

同时，我为这个创建了一个合适的插件.它接受任意数量的函数，可以用于任何事件.It can be found on GitHub

jQuery单击切换两个功能

推荐答案

Jquery相关问答推荐

从 React 到 Node 服务器的 ajax 调用中的数据未定义

如何在没有实体框架的情况下在 ASP.NET 上使用 ajax 和 jquery 从列表创建数据表

formData.append 来自不同输入文件的两个文件

获取单选按钮组的值

JSON 服务在失败/错误时应该返回什么

不使用插件的 jQuery 缓动函数

如何在不导致页面滚动的情况下删除位置哈希？

删除所有子元素的 CLASS

moment.js isValid 函数无法正常工作

点击时保持 Bootstrap 下拉菜单打开

Rails 无法正确解码来自 jQuery 的 JSON(数组变成带有整数键的散列)

$(document).ready(function(){});页面底部的 vs 脚本

Bootstrap 4 文件输入

将多个 JavaScript 文件合并为一个 JS 文件

Google 的 CDN 上的最新 jQuery 版本

如何以编程方式触发 ngClick

使用 moment.js 将日期转换为字符串MM/dd/yyyy

textarea 的 val() 与 text()

jquery在cookie中保存json数据对象

jQuery 将换行符转换为 br (nl2br 等效)