J'ai une page HTML très simple avec code JS: cette page se lie 10 boutons, mais lorsque vous cliquez sur n'importe quel bouton, il affiche toujours une alerte "option9". Comment est-il possible d'assigner l'événement OnClick pour afficher l'option correspondante!? Merci!
7 Réponses :
Vous devrez faire quelque chose comme ceci:
btnShow.onclick = (function(opt) {
return function() {
showParam(opt);
};
})(arrOptions[i]);
Qu'est-ce qui se passe réellement ici? Cela a également travaillé pour moi aussi, mais je veux aussi comprendre :-)
@Martinelvar Il a créé une fonction que des arguments optent, puis lorsque nous appliquons le (...) (arrogances [i]), alors il est passé d'opter et ensuite lorsque nous cliquons sur BTNShow, cette fonction est appelée avec les paramètres des paramètres qui ont été. ensemble.
Une meilleure façon, cela n'est pas aussi déroutant consiste à utiliser l'attribut "Données" du nœud, puis à l'aide de ce fichier.Data comme paramètre de la fonction. Voici un exemple: btnshow.data = arropostions [i]; btnshow.onclick = fonction () {showparam (this.data); }
Considérez le fait que lorsque la fonction OnClick () est exécutée, tout ce qu'il a:
btnShow.value = "Show Me Option";
var optionPar = arrOptions[i];
btnShow.optionPar = optionPar;
btnShow.onclick = function(e) {
// if I'm not mistaking on how to reference the source of the event.
// and if it would work in all the browsers. But that's the idea.
showParam(e.source.optionPar);
}
i joindre un gestionnaire d'événements: qui peut récupérer quoi que ce soit de l'élément qui a déclenché l'événement: dans quel cas Vous devez intégrer l'option à l'intérieur de l'élément / la balise. Dans mon cas, j'utilise l'identifiant.
Pour jQuery, consultez la section Ajouter des données d'événement em> à partir du API A >: ...
for (var i = 0; i < arrOptions.length; i++) {
$('<input id="btn" type="button" value="Show Me Option"><input>').appendTo("#divButtons")
$('#btn').bind("click", {
iCount: i},
function(event) {
showParam(arrOptions[iCount]);
});
}
Vous ne passez que la référence de la variable à la fonction, pas de valeur. Donc, chaque fois que la boucle est itérale, elle attribue une référence à votre fonction anonyme et toutes les mêmes valeur de la même valeur en mémoire. Mais puisque vous utilisez le même nom de variable dans la boucle, vous écrasez la valeur de la variable. Vous pouvez concaténer la variable à une chaîne pour préserver sa valeur. Par exemple, comme celui-ci:
btnShow.onclick = new Function("", "showParam(" + arrOptions[i] + ");");
La réponse acceptée semble fonctionner, mais semble être déroutante et une façon un peu encombrante de le faire. Une meilleure façon peut peut-être utiliser l'attribut de données de l'élément que vous souhaitez affecter l'auditeur d'événements. C'est simple, facile à comprendre et bien moins de code. Voici un exemple:
La réponse acceptée est correcte mais je pense qu'aucune explication réelle n'a été faite.
Permettez-moi d'essayer d'expliquer, le problème ici est une fermeture classée classique.
La variable 'i' est augmentée de 1 par une itération par boucle,
et Alors, la boucle continue jusqu'à ce que 'I' est 10,
Ensuite, chaque fois que l'événement en cours de clic est déclenché, il faut la valeur de i qui est 10.
Maintenant, pour la solution,
Dans la solution, nous utilisons une fermeture, de sorte que lorsque nous appliquons la valeur de 'i' à l'événement en cours de clic de l'élément A, cela obtient réellement la valeur exacte de i à temps.
La fonction interne de l'événement OnClick Créez une fermeture où elle références le paramètre (arropositions [i]), ce qui signifie que la variable IE réelle est au bon moment.
La fonction se ferme finalement avec cette valeur en toute sécurité,
et peut alors retourner sa valeur correspondante lorsque l'événement en cours d'exécution est en cours d'exécution.