javascript - school - ¿Alternativa al método.toggle() de jQuery que admite eventData?

toggle function javascript

Question

La documentación de jQuery para el método .toggle() indica:

El método .toggle () se proporciona por conveniencia. Es relativamente sencillo implementar el mismo comportamiento a mano, y esto puede ser necesario si las suposiciones incorporadas en .toggle () prueban ser limitantes.

Las suposiciones incorporadas en .toggle han demostrado ser limitantes para mi tarea actual, pero la documentación no .toggle cómo implementar el mismo comportamiento. Necesito pasar eventData a las funciones del controlador provistas para toggle() , pero parece que solo .bind() soportará esto, no .toggle() .

Mi primera inclinación es utilizar un indicador que sea global para una sola función de controlador para almacenar el estado de clic. En otras palabras, en lugar de:

$(''a'').toggle(function() {
  alert(''odd number of clicks'');
}, function() {
  alert(''even number of clicks'');
});

hacer esto:

var clicks = true;
$(''a'').click(function() {
  if (clicks) {
    alert(''odd number of clicks'');
    clicks = false;
  } else {
    alert(''even number of clicks'');
    clicks = true;
  }
});

No he probado esto último, pero sospecho que funcionaría. ¿Es esta la mejor manera de hacer algo como esto, o hay una mejor manera que me estoy perdiendo?

¡Gracias!

Answer 1

Parece una forma razonable de hacerlo ... Sugeriría que utilice las utilidades de almacenamiento de datos de jQuery en lugar de introducir una variable adicional (que podría convertirse en un dolor de cabeza si desea hacer un seguimiento de un montón de enlaces) . Entonces basado en tu ejemplo:

$(''a'').click(function() {
  var clicks = $(this).data(''clicks'');
  if (clicks) {
    alert(''odd number of clicks'');
  } else {
    alert(''even number of clicks'');
  }
  $(this).data("clicks", !clicks);
});

Answer 2

Aquí hay un complemento que implementa una alternativa a .toggle() , especialmente porque se eliminó en jQuery 1.9+.

Cómo utilizar:

La firma de este método es:

.cycle( functions [, callback] [, eventType])

• functions [Matriz]: una serie de funciones para alternar entre
• callback [Función]: una función que se ejecutará al finalizar cada iteración. Se pasará la iteración actual y la salida de la función actual. Se puede usar para hacer algo con el valor de retorno de cada función en la matriz de functions .
• eventType [String]: una cadena que especifica los tipos de eventos para el ciclo, ej. "click mouseover"

Un ejemplo de uso es:

$(''a'').cycle([
    function() {
      alert(''odd number of clicks'');
    }, function() {
      alert(''even number of clicks'');
    }
]);

He incluido una demostración aquí .

Código de complemento:

(function ($) {
    if (!Array.prototype.reduce) {
        Array.prototype.reduce = function reduce(accumulator) {
            if (this === null || this === undefined) throw new TypeError("Object is null or undefined");
            var i = 0,
                l = this.length >> 0,
                curr;

            if (typeof accumulator !== "function") // ES5 : "If IsCallable(callbackfn) is false, throw a TypeError exception."
            throw new TypeError("First argument is not callable");

            if (arguments.length < 2) {
                if (l === 0) throw new TypeError("Array length is 0 and no second argument");
                curr = this[0];
                i = 1; // start accumulating at the second element
            } else curr = arguments[1];

            while (i < l) {
                if (i in this) curr = accumulator.call(undefined, curr, this[i], i, this);
                ++i;
            }

            return curr;
        };
    }
    $.fn.cycle = function () {
        var args = Array.prototype.slice.call(arguments).reduce(function (p, c, i, a) {
            if (i == 0) {
                p.functions = c;
            } else if (typeof c == "function") {
                p.callback = c;
            } else if (typeof c == "string") {
                p.events = c;
            }
            return p;
        }, {});
        args.events = args.events || "click";
        console.log(args);
        if (args.functions) {
            var currIndex = 0;

            function toggler(e) {
                e.preventDefault();
                var evaluation = args.functions[(currIndex++) % args.functions.length].apply(this);
                if (args.callback) {
                    callback(currIndex, evaluation);
                }
                return evaluation;
            }
            return this.on(args.events, toggler);
        } else {
            //throw "Improper arguments to method /"alternate/"; no array provided";
        }
    };
})(jQuery);