Alternative à jQuery .toggle() méthode qui prend en charge eventData?

La jQuery documentation pour la .toggle() méthode unis:

L' .toggle() la méthode est fournie pour votre commodité. Il est relativement simple à mettre en œuvre le même comportement à la main, et cela peut être nécessaire si les hypothèses .toggle() prouver limitant.

Les hypothèses .toggle ont prouvé la limitation de ma tâche en cours, mais la documentation n'est pas élaborer sur la façon de mettre en œuvre le même comportement. J'ai besoin de passer eventData au gestionnaire de fonctions prévues pour toggle(), mais il semble que seule .bind() soutiennent, pas .toggle().

Mon premier réflexe est d'utiliser un indicateur global d'une seule fonction de gestionnaire de magasin de la cliquez sur état. En d'autres termes, plutôt que d':

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

ce faire:

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

Je n'ai pas testé le dernier, mais je soupçonne que cela fonctionnerait. Est-ce la meilleure façon de faire quelque chose comme cela, ou est-il une meilleure façon que je suis absent?

Merci!

Je ne comprends pas votre question. Qu'essayez-vous de faire?
Je ne peux pas utiliser .toggle (), car il ne semble pas en charge la transmission de eventData à la fonction de gestionnaire. Je suis à la recherche de la meilleure solution alternative qui prend en charge eventData, qui (à ma connaissance) est basé sur la .méthode bind (). En d'autres termes, où le jQuery documention dit "c'est relativement simple à mettre en œuvre le même comportement à la main," je suis en train de le faire.

OriginalL'auteur Bungle | 2010-03-17

  1. 36

    Semble comme un moyen raisonnable de le faire... je venais juste de suggérer que l'utilisation de jQuery le stockage de données utilitaires plutôt que l'introduction d'une variable supplémentaire (qui pourrait devenir un casse-tête si vous voulez garder une trace de tout un tas de liens). Donc à partir de votre exemple:

    $('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);
});
    Merci, Alconja - bonne réponse! J'apprécie la concision exemple de code.
    Hmm.. lors du premier clic, il n'exécute pas...
    Fonctionne pour moi sur le premier clic (il suffit de copier/coller cette source exacte dans ma console Firebug et maintenant tous les liens de cette page est tir alertes d'abord aller). Voyez-vous une erreur, ou tout simplement pas d'alerte?
    Eh bien, j'ai essayé de mettre en œuvre un slideDown lors du premier clic. Également changé le 'a' de la sélection d'une classe de sélection. Pas sûr si c'est pertinent. J'ai reproduit le problème ici: jsfiddle.net/3gpfc
    Mettez votre slideUp et slideDowns. Sur le premier clic, clicks sera undefined qui sera interprété comme false, de sorte qu'il exécutera la else branche.

    OriginalL'auteur Alconja

  2. 2

    Ici est un plugin qui met en œuvre une alternative à .toggle(), surtout depuis qu'il a été supprimé en jQuery 1.9+.

    Comment utiliser:

    La signature de cette méthode est:

    .cycle( functions [, callback] [, eventType])
    • functions [Array]: Un tableau de fonctions de cycle entre
    • callback [Fonction]: Une fonction qui sera exécutée à la fin de chaque itération. Il sera passé de l'itération en cours et la sortie de la fonction en cours. Peut être utilisé pour faire quelque chose avec la valeur de retour de chaque fonction dans l' functions tableau.
    • eventType [String]: Une chaîne de caractères spécifiant les types d'événements du cycle de marche, par exemple. "click mouseover"

    Un exemple d'utilisation est:

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

    J'ai inclus une démonstration ici.

    Code du module:

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

    OriginalL'auteur Asad Saeeduddin