Jquery-同一个对象，多次点击，多个函数

我在想要找出最好的方法来实现单击object1一次并导致一次函数（动画对象A）的效果，然后再次单击object1并导致另一个功能（动画另一个对象B）等等。Jquery-同一个对象，多次点击，多个函数

有人可以给我一些折磨我的东西吗？我知道如何通过jQuery/CSS添加/删除/切换类实现动画，但我正在寻找最有效的方法。

2012-07-25 Commandrea

如果您只是想在两个函数之间切换（首先将在第一次单击时执行，第二次将执行第二次点击，然后再次等等..），那么你可以你jQuery.toggle（）函数。 – Vishal 2012-07-25 05:03:08

我想一个更好的描述效果的方法是用枪射击多颗子弹--1-红色，2-蓝色，3-绿色。每次点击枪时它会发射三颗子弹中的一颗......对不起，我没有足够的工作来展示一个例子！ – Commandrea 2012-07-25 05:07:34

然后，您可以按照@andrewdotnich给出的示例进行操作，但是您必须小心，因为如果您没有正确使用它，它可以绑定多个点击事件。否则，您可以保留一个计数器，并在每次点击时检查它的值，然后根据它执行相应的功能。 – Vishal 2012-07-25 05:09:49

您正在寻找JQuery'one-shot'事件处理程序。

http://api.jquery.com/one/

function first() { 
    $('#a').animate(); 
}; 

function next() { 
    $('#b').animate(); 
}; 

$('#button').one('click', function() { 
    first(); 
    $('#button').click(next); 
};

这将运行first功能第一次点击事件被触发，然后重新结合的Click事件的next功能适用于所有后续的点击。

编辑：或者，如果你有两个，并希望他们交替，您可以使用toggle维沙尔的建议：http://api.jquery.com/toggle-event/

编辑2：

另一种选择是保留一个计数器在事件处理程序，如下所示：

function fireA() { /*...*/ } 
function fireB() { /*...*/ } 
function fireC() { /*...*/ } 

$('#button').click(function() { 
    var events = [fireA, fireB, fireC]; 

    //declare counter 
    if(!this.counter) { this.counter = 0; } 

    events[this.counter](); 
    this.counter = (this.counter + 1) % 3; 
});

来源

2012-07-25 05:03:16 andrewdotnich

我有一个爆炸瓦特/第二编辑替代 - 谢谢andrewdotnich！ – Commandrea 2012-07-25 05:46:20

进一步的重构：如果事件的机制是相同的，但碰巧发生在不同的元素/对象上，则可以重写它，以便处理程序调用单个函数，将元素/对象作为参数进行动画传递。然后，您可以简单地将一组可能的参数保存到函数中，而不是引用函数... – andrewdotnich 2012-07-25 06:13:35

已记录。事件确实有点不同 - 在每个地点的不同位置结束。唯一剩下的因素就是我有一个if子句，如果一个类在一个对象上是真的，那么函数fireA等等......如果函数上的类是错误的，那么'子弹'将会简单地消失。到达那里！感谢您的帮助。 – Commandrea 2012-07-25 06:28:15

Jquery-同一个对象，多次点击，多个函数

回答

相关问题