jQuery clic / alternar entre dos funciones

Te traemos el hallazgo a este conflicto, al menos eso creemos. Si continuas con preguntas puedes escribirlo en el apartado de comentarios y sin pensarlo

Solución:

jQuery tiene dos métodos llamados .toggle(). El otro ^[docs] hace exactamente lo que quiere para los eventos de clic.

Nota: Parece que al menos desde jQuery 1.7esta versión de .toggle es obsoleto, probablemente por esa misma razón, a saber, que existen dos versiones. Utilizando .toggle cambiar la visibilidad de los elementos es solo un uso más común. El método fue eliminado en jQuery 1.9.

A continuación se muestra un ejemplo de cómo se podría implementar la misma funcionalidad que un complemento (pero probablemente exponga los mismos problemas que la versión integrada (consulte el último párrafo en la documentación)).

---

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

MANIFESTACIÓN

(Descargo de responsabilidad: ¡No digo que esta sea la mejor implementación! Apuesto a que se puede mejorar en términos de rendimiento)

Y luego llamarlo con:

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

Actualización 2:

Mientras tanto, creé un complemento adecuado para esto. Acepta un número arbitrario de funciones y se puede utilizar para cualquier evento. Se puede encontrar en GitHub.

MANIFESTACIÓN

.one() documentación.

Llegué muy tarde para responder, pero creo que es el código más corto y podría ayudar.

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

DEMO con código de operación

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

Complemento Micro jQuery

Si quieres tu propio encadenable hacer clic en Alternar Método jQuery puedes hacerlo así:

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

A
A
A

---

Conmutador de funciones simples

DEMO EN VIVO

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

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

Si lo quieres aún más corto (¿Por qué uno, verdad?) puede usar Bitwise XOR ^*Documentos operador como:
MANIFESTACIÓN

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

Eso es todo.
_{El truco es establecer el this Objeto un boolean propiedad togy cambiarlo usando negación (tog = !tog)
y poner las llamadas de función necesarias en un Operador Condicional?:}

---

En el ejemplo de OP (incluso con múltiples elementos) podría verse así:

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

ADEMÁS: Tú también puedes Tienda-palanca me gusta:
MANIFESTACIÓN:

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

_{pero no fue la solicitud exacta del OP porque él es looking for a way to have two separate operations / functions}

---

Usando Array.prototype.reverse:

_{Nota: esto no almacenará el estado actual de Toggle sino que simplemente invertirá las posiciones de nuestras funciones en Array (Tiene sus usos…)}

Simplemente almacena su a,b funciones dentro de un array, al hacer clic simplemente inviertes el array ordenar y ejecutar la array[1] función:

DEMO EN VIVO

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"...
);

---

¡ALGUNA MASHUP!

jQuery DEMO
DEMO JavaScript

Crea una buena función toggleAB() que contendrá tus dos funciones, ponerlos en matrizy al final de la array simplemente ejecutas la función [0 // 1] respectivamente dependiendo de la tog propiedad que se pasa a la función desde el this referencia:

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

Sección de Reseñas y Valoraciones

Si tienes algún reparo y capacidad de medrar nuestro noticia puedes realizar una ilustración y con gusto lo estudiaremos.

---

---

Utiliza Nuestro Buscador