jQuery单击/切换两个函数

Question

我正在寻找一种方法,在点击某些内容时运行两个单独的操作/函数/"代码块",然后在再次单击相同的内容时运行完全不同的块.我把它放在一起.我想知道是否有更有效/更优雅的方式.我知道jQuery .toggle()但它有点糟糕.

在这里工作: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);
    }
});

Answer 1

jQuery有两个叫做的方法.toggle().在另一个^[文件]不正是你想要的click事件.

注意:至少从jQuery 1.7开始,这个版本似乎已.toggle被弃用,可能正是出于这个原因,即存在两个版本.利用.toggle改变元素的知名度仅仅是一个更常见的用法.该方法在jQuery 1.9中被删除.

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

(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

(免责声明:我不是说这是最好的实现!我敢打赌它可以在性能方面得到改善)

然后调用它:

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

更新2:

与此同时,我为此创建了一个合适的插件.它接受任意数量的函数,可用于任何事件.它可以在GitHub上找到.

Answer 2

DEMO

.one()文档.

我很晚才回答,但我认为这是最短的代码,可能有所帮助.

function handler1() {
    alert('First handler: ' + $(this).text());
    $(this).one("click", handler2);
}
function handler2() {
    alert('Second handler: ' + $(this).text());
    $(this).one("click", handler1);
}
$("div").one("click", handler1);

演讲与Op的代码

function handler1() {
    $(this).animate({
        width: "260px"
    }, 1500);
    $(this).one("click", handler2);
}

function handler2() {
    $(this).animate({
        width: "30px"
    }, 1500);
    $(this).one("click", handler1);
}
$("#time").one("click", handler1);

Answer 3

Micro jQuery插件

如果你想要你自己的可链接clickToggle jQuery方法,你可以这样做:

jQuery.fn.clickToggle = function(a, b) {
  return this.on("click", function(ev) { [b, a][this.$_io ^= 1].call(this, ev) })
};

// TEST:
$('button').clickToggle(function(ev) {
  $(this).text("B"); 
}, function(ev) {
  $(this).text("A");
});

<button>A</button>
<button>A</button>
<button>A</button>

<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>

简单功能Toggler

现场演示

function a(){ console.log('a'); }
function b(){ console.log('b'); }

$("selector").click(function() { 
  return (this.tog = !this.tog) ? a() : b();
});

如果你想要它更短(为什么一个,对吧？!)你可以使用Bitwise XOR ^*Docs运算符,如:
DEMO

  return (this.tog^=1) ? a() : b();

就这样.
_{诀窍是将thisObject 设置为一个boolean属性tog,并使用negation(tog = !tog)
将其切换,并将所需的函数调用放入条件运算符中 ?:}

在OP的例子中(即使有多个元素)可能看起来像:

function a(el){ $(el).animate({width: 260}, 1500); }
function b(el){ $(el).animate({width: 30}, 1500);  }

$("selector").click(function() {
  var el = this;
  return (el.t = !el.t) ? a(el) : b(el);
}); 

另外:你也可以存储 -toggle:
DEMO:

$("selector").click(function() {
  $(this).animate({width: (this.tog ^= 1) ? 260 : 30 });
}); 

_{但这不是OP对他的确切要求 looking for a way to have two separate operations / functions}

使用Array.prototype.reverse:

_{注意:这不会存储当前的Toggle状态,而只是反转我们在Array中的函数位置(它有它的用途......)}

您只需将a,b函数存储在一个数组中,只需单击反转数组顺序并执行该array[1]函数即可:

现场演示

function a(){ console.log("a"); }
function b(){ console.log("b"); }
var ab = [a,b];

$("selector").click(function(){
  ab.reverse()[1](); // Reverse and Execute! // >> "a","b","a","b"...
});

一些混搭!

jQuery DEMO
JavaScript DEMO

创建一个toggleAB()包含两个函数的好函数,将它们放在Array中,并在数组的末尾0 // 1分别执行函数[ ],具体取决于tog从this 引用传递给函数的属性:

function toggleAB(){
  var el = this; // `this` is the "button" Element Obj reference`
  return [
    function() { console.log("b"); },
    function() { console.log("a"); }
  ][el.tog^=1]();
}

$("selector").click( toggleAB );

Answer 4

如果你需要做的就是切换一个值,我会为你展示的代码执行类似的操作:

var oddClick = true;
$("#time").click(function() {
    $(this).animate({
        width: oddClick ? 260 : 30
    },1500);
    oddClick = !oddClick;
});

Answer 5

我用它来创建两个函数之间的切换效果.

var x = false;
$(element).on('click', function(){
 if (!x){
  //function
  x = true;
 }
 else {
  //function
  x = false;
 }
});

Answer 6

我不认为您应该实现toggle方法，因为将其从jQuery 1.9中删除是有原因的。

考虑使用jQuery完全支持的toggleClass：

function a(){...}
function b(){...}   

例如，假设您的事件触发器是onclick，因此：

第一种选择：

$('#test').on('click', function (event) {

    $(this).toggleClass('toggled');

    if ($(this).hasClass('toggled')) {
        a();
    } else{
        b();
    }
}

您还可以将处理程序函数作为参数发送：

第二种选择：

$('#test').on('click',{handler1: a, handler2: b}, function (event) {

    $(this).toggleClass('toggled');

    if ($(this).hasClass('toggled')) {
        event.data.handler1();
    } else{
        event.data.handler2();
    }
}